空间转换

transform

使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

3D坐标轴图.png

空间位移

语法

transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);

取值

取值（正负均可）
像素单位数值
百分比

空间位移实例.png

透视

使用perspective属性实现透视效果

属性（添加给父级）

透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

Ø perspective: 值;
Ø 取值：像素单位数值， 数值一般在800 – 1200

作用

空间转换时，为元素添加近大远小、近实远虚的视觉效果

透视图.png

透视实例.png

空间旋转

rotate

使用rotate实现元素空间旋转效果

语法

Ø transform: rotateZ(值);
Ø transform: rotateX(值);
Ø transform: rotateY(值);

左手法则

Ø 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

左手法则.png

空间旋转实例-x轴.png

空间旋转实例-y轴.png

空间旋转实例-z轴.png

立体呈现

transform-style: preserve-3d

使用transform-style: preserve-3d呈现立体图形

注意点

perspective只增加近大远小、近实远虚的视觉效果

实现方法

Ø 添加 transform-style: preserve-3d;
Ø 使子元素处于真正的3d空间

呈现立体图形步骤

1. 盒子父元素添加transform-style: preserve-3d；
2. 按需求设置子盒子的位置（位移或旋转）

注意

Ø 空间内，转换元素都有自已独立的坐标轴，互不干扰

q

空间缩放

scale

使用scale实现空间缩放效果

语法

Ø transform: scaleX(倍数);
Ø transform: scaleY(倍数);
Ø transform: scaleZ(倍数);
Ø transform: scale3d(x, y, z);

动画

animation

使用animation添加动画效果

1，动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
2，动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
3，构成动画的最小单元：帧或动画帧

动画实现步骤

定义动画.png

使用动画.png

动画属性

注意：

Ø 动画名称和动画时长必须赋值
Ø 取值不分先后顺序
Ø 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

animation属性.png

属性表

属性表.png

steps实现逐帧动画

实例

精灵图逐帧播放.png