空间转换
目标:使用transform属性实现元素在空间内的位移、旋转、缩放等效果 空间:是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同。 空间转换也叫3D转换 属性:transform
空间w位移
语法 transform: translate3d(x, y, z); transform: translateX(值); transform: translateY(值); transform: translateZ(值); 取值(正负均可) 像素单位数值 百分比
透视
目标:使用perspective属性实现透视效果 近大远小、近清楚远模糊 使用perspective属性实现透视效果
属性(添加给父级) Ø perspective: 值; Ø 取值:像素单位数值, 数值一般在800 – 1200。
空间旋转
目标:使用rotate实现元素空间旋转效果 语法 Ø transform: rotateZ(值); Ø transform: rotateX(值); Ø transform: rotateY(值);
目标:使用rotate实现元素空间旋转效果 rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度 x,y,z 取值为0-1之间的数字
动画
目标:使用animation添加动画效果
目标:使用steps实现逐帧动画