CSS 空间转换3D和动画

空间转换3D

3D坐标系

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

• X 轴 往右越大，是正值， 否则反之
• Y 轴 往下越大，是正值，否则反之
• 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旋转

X轴旋转,Y轴旋转,Z轴旋转

transform: rotateX(360deg);
transform: rotateY(360deg);
transform: rotateZ(360deg);

左手法则

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

规则：

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

立体呈现

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

 transform-style: preserve-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;
}

动画属性

animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态

1. 动画名字参照css类选择器命名

2. 动画时长和延迟时间别忘了带单位 s

3. infinate 无限循环动画（重复次数）

4. alternate 为反向 就是左右来回执行动画（跑马灯）

5. forwards 动画结束停留在最后一帧状态， 不循环状态使用

6. linear 让动画匀速执行

   7.paused 鼠标经过时暂停动画

多组动画之间用逗号隔开