一、空间转换 3D

3D坐标系

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

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

X 轴往右越大，是正值，否则反之

Y 轴往下越大，是正值，否则反之

Z轴（指向我们）越大，是正值，否则反之

3D位移

有完整写法：

  transform: translate3d(x, y, z);

只不过在很多情况下，我们经常喜欢分开写：

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

透视

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

语法:

  perspective: 800px;

透视注意事项：

取值范围经常在 800px ~ 1200px 之间。
一定给父亲添加
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
- 其中 d 为透视的距离
- z 是 translateZ 的距离，这个距离靠近我们，盒子越大

3D旋转

有了透视的加持，我们3d旋转效果会比较明显。

rotateX

类似单杠旋转。

注意：默认的旋转中心在盒子的中心位置。

  body {
      /* 父级添加透视 */
      perspective: 400px;
 }
 
 img {
     transition: all 1s;
 }
 
 img:hover {
     transform: rotateX(360deg);
 }

rotateY

类似钢管舞。

 body {
     perspective: 400px;
 }
 
 img {
     transition: all 1s;
 }
 
 img:hover {
     transform: rotateY(360deg);
 }

左手法则

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

规则：

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

立体呈现

让子盒子在父盒子内有空间的展示，此时可以给父亲添加

二、动画（重点）

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

动画使用分为定义和调用：

定义： /* 1. 定义的动画 */ @keyframes dance {

    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.5)
    }}
    或者是
     /* 1. 定义的动画 */
    @keyframes dance {

       0% {
        transform: scale(1)
      } 

      100% {
        transform: scale(1.5)
      }
    }

动画属性

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画
alternate 为反向就是左右来回执行动画（跑马灯）
forwards 动画结束停留在最后一帧状态
linear 让动画匀速执行

鼠标经过暂停动画

/* 鼠标经过box，则 ul 停止动画 */

    animation-play-state: paused;
}

多组动画

animation: run 1s steps(12) infinite, move 5s linear forwards;

基础知识巩固