移动Web 第二天 空间转换 动画 4.2

109 阅读1分钟

空间转换

目标:使用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添加动画效果

image.png

image.png 目标:使用steps实现逐帧动画

image.png