一、空间转换

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

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

空间转换也叫3D转换属性：transform

1 空间位移

语法transform: translate3d(x, y, z);transform: translateX(值);transform: translateY(值);transform: translateZ(值);取值（正负均可）像素单位数值百分比

2 透视

思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？

答：近大远小、近清楚远模糊

思考：默认情况下，为什么无法观察到Z轴位移效果？

答：Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果

属性（添加给父级）perspective: 值;取值：像素单位数值， 数值一般在800 – 1200。

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

3 空间旋转

语法transform: rotateZ(值);transform: rotateX(值);transform: rotateY(值);

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

拓展rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

x，y，z 取值为0-1之间的数字

4 立体呈现

思考：使用perspective透视属性能否呈现立体图形？

答：不能，perspective只增加近大远小、近实远虚的视觉效果。

实现方法

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

呈现立体图形步骤

1.盒子父元素添加transform-style: preserve-3d；

2.按需求设置子盒子的位置（位移或旋转）注意空间内，转换元素都有自已独立的坐标轴，互不干扰

二、动画

思考：过渡可以实现什么效果？

答：实现2个状态间的变化过程

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面构成动画的最小单元：帧或动画帧

2.1 实现步骤

实现步骤：

1.定义动画

2.使用动画

2.2 动画属性

注意：

1.动画名称和动画时长必须赋值

2.如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

3.running 不能作为动画名称

4.动画播放次数：infinite 无限次播放

5.动画播放方向：alternate 交替播放

6.速度曲线：默认 ease； linear 匀速播放

7.执行完毕时的状态：forwards 动画会停在动画结束时的状态

8.animation 里面属性值 不分先后顺序

9.forwards不能和infinite结合使用，否则不生效

具体属性：