CSS3~2D到3D的转变
程序员文章站
2022-07-12 09:52:27
...
2D：
CSS3动画效果共3大部分：
（1）CSS3变形；
（2）CSS3过渡；
（3）CSS3动画；
一、变形过程
在CSS3中，所有变形方法都是属于transform属性，因此所有关于变形的方法前面都要加上“tranform:”
transform属性（变形方法）
//呈现出来的仅仅只是转变结果，并无过程显示
translate() 位移-->将元素沿着水平方向（X轴）和垂直方向（Y轴）移动。
{
（1）translateX(50px)：元素仅在水平方向移动（X轴移动）；
（2）translateY(50px)：元素仅在垂直方向移动（Y轴移动）；
（3）transklate(x,y)：元素在水平方向和垂直方向同时移动（X轴和Y轴同时移动）；
//取值可为负，用来显示向相反方向移动
//注意：在网站布局中，X轴正向为右，Y轴正向为下
//单位为px、em或百分比等
//注意：只显示转变后的结果，即原来的状态并不显示，更别说显示转变过程了
//在transklate(x,y)中：Y是一个可选参数，如果没有设置Y值，则表示元素仅仅沿着X轴正方形移动。
//格式为：（设置在css中）
transform:translateX(20px);
-webkit-transform:translateX(20px); /*兼容-webkit-引擎浏览器*/
-moz-transform:translateX(20px); /*兼容-moz-引擎浏览器*/
}
scale() 缩放-->将元素根据中心原点进行缩放。
{
（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；
（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；
（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；
//x,y不存在单位，如果大于1就代表放大；如果小于1就代表缩小。
//scale(x,y)中y可以省略，即默认x,y的缩放比例是相同的
//两个方向同时延伸，整体放大//注意：只显示转变后的结果，即原来的状态并不显示，更别说显示转变过程了
//例：（写在css中）
transform:scaleX(1.5);
-webkit-transform:scaleX(1.5); /*兼容-webkit-引擎浏览器*/
-moz-transform:scaleX(1.5); /*兼容-moz-引擎浏览器*/
}
rotate() 旋转-->将元素相对中心原点进行旋转，这里的旋转是二维的，即2D
{
transform：rotate(度数);
//度数指的是元素相对中心原点进行旋转的度数，单位为deg。其中，deg是degree（度数）的缩写。如果度数为正，则表示元素相对原点中心顺时针旋转；如果度数为负，则表示元素相对原点中心进行逆时针旋转。
//判定旋转，想象成一个立体，从旋转的轴向里面看，若transform:scaleX(1.5);即从X轴的箭头端向原点看，为正数就是顺时针旋转
//注意：只显示转变后的结果，即原来的状态并不显示，更别说显示转变过程了
//格式（在css中）
transform:rotate(30deg);
-webkit-transform:rotate(30deg); /*兼容-webkit-引擎浏览器*/
-moz-transform:rotate(30deg); /*兼容-moz-引擎浏览器*/
}
skew() 倾斜
{
（1）skewX(x)：使元素在水平方向倾斜（X轴倾斜）；
（2）skewY(y)：使元素在垂直方向倾斜（Y轴倾斜）；
（3）skew(x,y)：使元素在水平方向和垂直方向同时倾斜（X轴和Y轴同时倾斜）；
//x,y表示元素在X,Y轴倾斜的度数，单位为deg。如果度数为正，表示元素沿水平或垂直方向顺时针倾斜；如果度数为负，表示元素沿水平或垂直方向逆时针倾斜。
//对于skew(x,y)：第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无倾斜。
//旋转细则：
（1）skewX()方法会保持高度，沿着X轴倾斜；
（2）skewY()方法会保持宽度，沿着Y轴倾斜；
（3）skew(x,y)方法会先按照skewX()方法倾斜，然后按照skewY()方法倾斜；
//例：
transform:skewY(30deg);
-webkit-transform:skewY(30deg); /*兼容-webkit-引擎浏览器*/
-moz-transform:skewY(30deg); /*兼容-moz-引擎浏览器*/
}
transform-origin 中心原点
{
//任何一个元素都有一个中心原点，默认情况下，元素的中心原点位于X轴和Y轴的50%处。
//默认情况下，CSS3变形进行的位移、缩放、旋转、倾斜都是以元素的中心原点进行变形。
//可以通过transform-origin属性来改变元素变形时的中心原点位置。
transform-origin:取值;
//transform-origin属性取值有2种：一种是采用长度值，另外一种是使用关键字。长度值一般使用百分比作为单位，很少使用px、em等作为单位。
//取值：
关键字 百分比 说明
top left 0 0 左上
top center 50% 0 靠上居中
top right 100% 0 右上
left center 0 50% 靠左居中
center center 50% 50% 正中
right center 100% 50% 靠右居中
bottom left 0 100% 左下
bottom center 50% 100% 靠下居中
bottom right 100% 100% 右下
//个人观点总结：对于关键字如何书写的问题-->优先级是：top(bottom)>left(right)>center，按照这种顺序书写出来之后，在按照汉语的理解就行了...对于百分比如何书写的问题，先写在X轴上的百分比，然后再写在Y轴上的百分比
//例：
transform-origin:right center;
-webkit-transform-origin:right center;/*兼容-webkit-引擎浏览器*/
-moz-transform-origin:right center; /*兼容-moz-引擎浏览器*/
//中心原点的声明与图形的旋转代码没有在写代码顺序上的谁先谁后的问题
}
二、过渡过程
//呈现的是一种过渡“过程”
//呈现的是元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现动画效果
transition属性（过渡）
transition:属性 持续时间 过渡方法 延迟时间（可选属性）;
//对于CSS3过渡动画，大多数情况下都是配合:hover伪类 来使用。
//例：
div
{
background-color:silver;
transition:background-color 1s linear;
{
//上一句等价于：
transition-property:background-color;//取值是一个“CSS属性名”
transition-duration:1s ;//单位为s（秒），可以为小数如0.5s。
transition-timing-function:linear;//所谓的“过渡方式”主要用来指定动画在过渡时间内的速率。
//过渡方式包括{
ease:默认值，速度由快到慢，即逐渐变慢的过程
linear:线性渐变
ease-in:速度越来越快，称为渐显效果
ease-out:速度越来越慢，称为渐隐效果
ease-in-out:先加速再减速，称为渐显渐隐效果
}
transition-delay:0;//动画开始的延迟时间，单位为s（秒），可以为小数如0.5s。默认为0
}
-webkit-transition:background-color 1s linear;
-moz-transition:background-color 1s linear;
-o-transition:background-color 1s linear;
}
div:hover
{
background-color:#45B823;
}
//transition属性同时对多个CSS属性进行实现平滑过渡效果。
//例：
div
{
display:inline-block;
width:100px;
height:100px;
border-radius:0;
background-color:#14C7F3;
transition-property:border-radius,background-color;
//此处只需写入多个css属性名即可
transition-duration:1s ;
transition-timing-function:linear;
transition-delay:2s;
//或者可以统一写成-->
//transition:border-radius,background-color 1s linear 2s;
}
div:hover
{
border-radius:50px;
background-color:red;
}
//此处有一小细节：就是transition的一系列代码，全部都写在了div中
而没有写在hover伪类中，因为写在div中会有从初始状态渐变到目标
状态，然后再从目标状态渐变回初始状态的过程，而若写在伪类中的话，
只会存在从初始状态渐变到目标状态的过程，而不存在从目标状态渐变回
初始状态的过程
//注意：既然是过渡，就得有初始状态的属性值及末状态的属性值，如果没有初始状态的属性值，则其渐变函数的效果是体现不出来的，会有突然变化的情况出现
三、动画过程
//在CSS3中，动画效果使用animation属性来实现。animation属性和transition属性功能是相同的，都是通过改变元素的“属性值”来实现动画效果。
//transition与animation区别：
1>transition属性只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。
2>animation属性则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。
animation动画过程
1）定义动画
{
@keyframes 动画名
{
0%{……}
……
100%{……}
}
//一个@keyframes规则中可以由多个百分比构成，但是最少必须得有0%和100%，（如果只有0%和100%的话，可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。），当有多个百分比的时候，每一个百分比都可以定义自身的CSS样式，从而形成一系列的动画效果。
}
2）调用动画
{
-webkit-animation-name:动画名;//调用动画
-webkit-animation-duration:5s;//动画持续时间，单位为s（秒），可以为小数如0.5s。
-webkit-animation-timing-function:linear;//所谓的“播放方式”主要用来指定动画在播放时间内的速率。
//播放方式包括{
ease:默认值，速度由快到慢，即逐渐变慢的过程
linear:线性渐变
ease-in:速度越来越快，称为渐显效果
ease-out:速度越来越慢，称为渐隐效果
ease-in-out:先加速再减速，称为渐显渐隐效果
}
-webkit-animation-delay:2s;//设置动画在页面打开之后延迟2s开始播放，单位为s（秒），可以为小数如0.5s。默认为0
-webkit-animation-iteration-count:infinite;//播放次数
//播放次数有两种形式：
（1）正整数；（默认为1）
（2）infinite；（无限次循环播放）
-webkit-animation-direction:reverse;
//播放方向有三种取值方式：
（1）normal 每次循环都向正方向播放（默认值）
（2）reverse 每次循环都向反方向播放
（3）alternate 播放次数是奇数时，动画向原方向播放；播放次数是偶数时，动画向反方向播放
-webkit-animation-play-state:paused;//播放状态
//播放状态有两种取值：
（1）running 播放动画（默认值）
（2）paused 暂停动画
//可以结合js或者伪类来实现暂停或运行
-webkit-animation-fill-mode:forwards;//动画结束之后处于什么状态
//四种取值：
none 动画完成最后一帧时会反转到初始帧处（默认值）（处于初始状态）
forwards（常用） 动画结束之后继续应用最后的关键帧位置（处于末状态）
backwards（常用） 会在向元素应用动画样式时迅速应用动画的初始帧（处于初始状态）
both 元素动画同时具有forwards和backwards效果（处于末状态）
}
//区分：
1> @-webkit-keyframes mytransform
{
0%{border-radius:0;}
50%{border-radius:50px;-webkit-transform:translateX(0);}
100%{-webkit-transform:translateX(50px);}
}
2> @-webkit-keyframes mytransform
{
0%{border-radius:0;}
50%{border-radius:50px;}
100%{-webkit-transform:translateX(50px);}
}
//首先假定动画一和二都是线性渐变，定义动画的意义就在于，当动画进行到某一时间的时候满足在其所在时间的状态帧，如此，那么动画一中，在进行到一半的时候动画只能是变成圆形，而不平移，这个时间状态过去后再平移，而在动画二中，全局都是对于平移没有特殊限定，所以会将平移根据渐变函数，分到各个时间点
//区分transition和animation
1>在transition中，如果想实现从目标状态向初始状态转变的过程的话，transition代码必须写在div中
2>在animation中，写在伪类中和div中是没有区别的，想要实现从初始状态向目标状态转变，目标状态向初始状态转变这一过程的话
(1)在没有-webkit-animation-direction:alternate的状态下
必须得从动画定义的时候把时间分成两部分，即0~50，50~100。两部分内容完全相反
(2)在有-webkit-animation-direction:alternate的状态下
只需要在0~100定义单向变化即可，-webkit-animation-direction:alternate，会将其正向运行后反向运行
3D：
下一篇： 3d点投影到2d屏幕，矩阵计算