空间转换 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;

1. 取值范围经常在 800px ~ 1200px 之间。

2. 一定给父亲添加

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

   • 其中 d 为透视的距离

   • z 是 translateZ 的距离， 这个距离靠近我们，盒子越大

• 3D旋转

语法

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

• 左手法则

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

2. 大拇指指向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)
      }
    }

• 调用动画

img {
    width: 200px;
    /* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/
    animation: dance .5s infinite;
}

动画的属性

 注意：             1画名称和动画时长必须赋值

                         2 取值不分先后顺序

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