一、空间转换 3D

3D坐标系

3D坐标系比2d多了一个Z轴

一定要记住3个坐标轴取值的正反：

1.值，否则反之 2.Y轴数值越大越往下 ，是正值，否则反之 3.Z轴， （是指向屏幕面前我们的）越大，是正值朝向我们，否则反之

3D位移

有完整写法：

transform: translate3d(x, y, z);

很多情况下 ，比较喜欢分开写

transform: translateX(100px); transform: translateY(100px); transform: translateZ(100px);

透视

透视的作用：空间转换时，为元素添加远大近小 ，近实远虚的效果 让我们切实看见 语法： perspective: 800px;

透视注意事项：

1.取值范围经常在 800px-1200px之间 （值越小效果越明显）

2.一定給父元素添加

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

其中d为透视的距离

z是translatez的距离 这个距离离我们越近 数值为正 盒子越大 反之则越小

3D旋转

有了视距的加持我们3d旋转的效果会更加明显 rotatex 类似单杠旋转 水平X轴好比那根横着的单杠运动员绕着它旋转

特别注意：我们轴默认的旋转中心是在盒子中心位置

效果展示：

rotateY

类似钢管舞 围绕那根y轴旋转

左手法则

一定要搞清楚x轴和Y轴是如何旋转的，旋转度数是正值还是负值

规则：

0. 大拇指指向X轴正向方（右）， 则四指指向的方向是旋转的方向
1. 大拇指指向Y轴正向方（下）， 则四指指向的方向是旋转的方向

立体呈现

让子盒子在父盒子内有空间的展示，此时可以给父亲添加 transform-style: preserve-3d;

二、动画（重点）

动画的最大特点是不用鼠标触发 ，自动的 连续的 反复的执行某些动画效果

动画的使用 分定义和调用： 1.定义：

frmo表示 初始状态 to表示结束状态 也可用0% 100%代替

2调用：

调用动画勿忘带上动画名称 执行时间和延迟执行单位s不要忘记

动画属性

1.动画名字惨遭css选择器类名 2.动画时长和延迟时间别忘记带上单位s 3.infinite无线循环动画（重复次数） 4.alternate 为反方向 左右上下来回执行动画（类似跑马灯） 5. forwards 动画结束停留最后一帧的状态 ，不循环状态使用 6. linear 让动画以匀速运行 7.steps帧动画 8.animation-play-state：paused 鼠标经过暂停动画 配合hover使用

鼠标经过暂停动画

多组动画 ： 中间以，号隔开