九、转换
1、2D转换
transform:用来设置2D或3D转换
转换可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式
①移动 translate(x, y) 改变元素的位置,相对原来的位置的变化,如果为百分比则是相对于盒子的大小;
translate3d(x,y,z) 3d空间的位置移动
②缩放 scale(x, y) 水平和垂直方向的缩放,x、y的取值可为小数,如果只有一个参数即缩放的倍数;
③旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针;旋转时元素的坐标也会跟着改变
④倾斜 skew(Ydeg, Xdeg) 可以使元素按一定的角度进行倾斜,会改变元素的形状
⑤矩阵变换matrix(x, y) 改变元素的位置
2、3D转换
(1)3D坐标轴
用X、Y、Z分别表示空间的3个维度,三条轴互相垂直。如下图
(2)3D呈现
transform-style:preserve-3D; 内嵌元素,并且必须经过Z变形(transform)
透视
perspective :辅助性帮我们去理解元素在转换过程中的视觉效果(0-1000)设置给父盒子,值越大,效果越不明显,看起来近大远小
3、backface-visibility
设置元素背面是否可见
十、动画
1、定义动画序列:
a、通过@keyframes指定动画序列名称,主要先定义再调用;