- A+
所属分类：Web前端
一，空间转换3D
3D坐标系：3D坐标系比2D多了一个Z轴
一定要记住3个坐标取值的正反：
X轴往右越大，是正值，否则反之
Y轴往下越大，是正值，否则反之
Z轴（指向我们）越大，是正值，否则反之
3D位移：
有完整写法：
taansform:translate3d(x,y,z);
只不过在很多情况下，我们喜欢分开写：
transform:translateX(100px); transform:translateY(100px); transform:translateZ(100px);
透视
透视的作用：空间转换时，为元素添加近大远小，近实远虚的视觉效果
语法：
perspective:800px
透视注意事项：
1.取值范围经常在800PX~1200px之间。
2.一定给父级添加
3.透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
3D旋转
有了透视的加持，我们3D旋转效果会比较明显。
rotateX
类似单杠旋转
注意：默认的旋转中心在盒子的中心位置。
body{ /*父级添加透视*/ perspective:400px; } img{ transition:all 1s; } img:hover{ tranform:rotateX(360deg); }
rotateY
类似钢管舞
body{ perspective:400px; } img { transition: all 1s; } img:hover { transform: rotateY(360deg); }
左手法则
一定要搞清楚X轴和Y轴如何旋转的，旋转的度数是正值还是负值。
规则：
1.大拇指指向X轴正向方（右），则四指指向的方向是旋转的方向
2.大拇指指向Y轴正向方（下），则四指指向的方向是旋转的方向
立体呈现
让子盒子在父盒子内有空间的展示，此时可以给父亲添加
transform-style；presrrve-3d;
二、动画（重点）
动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。
动画使用分为定义和调用：
1.定义：
/*1.定义的动画*/ @keyframes dance{ from { transform：scale(1) } to { transform:scale(1.5) } }
或者是
/* 1. 定义的动画 */ @keyframes dance { 0% { transform: scale(1) } 100% { transform: scale(1.5) } }
2.调用
img{ width:200px; /* 2. 使用动画 animation: 动画名称 执行时间; infinite 循环*/ animation: dance .5s infinite; }
动画属性
1.动画名字参照css类选择器命名
2.动画时长和延迟时间别忘了带单位S
3.infinate 无限循环动画
4.alternate 为反向 就是左右来回执行动画（跑马灯）
5.forwards 动画结束停留在最后一帧状态
6.linear 让动画匀速执行
鼠标经过暂停动画
/*鼠标经过box，则ul停止动画*/ .box:hover ul{ animation-play-state:paused; }
多组动画
/*我们想要2个动画一起执行 animation: 动画1，动画2，..动画n*/ animation: run 1s steps(12) infinite,move 5s linear forwards;
