空间转换3d

1.3d位移 transform: translate3d(x, y, z);

写法:

transform: translate3d(x, y, z);
  /* x y z之间用逗号隔开 */
  -   X 轴 往右越大，是正值， 否则反之
  -   Y 轴 往下越大，是正值，否则反之
  -   Z 轴（指向我们）越大，是正值，否则反之

或者写作

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

实现z轴效果需要设置透视效果

 perspective: 800px;
   -  取值范围经常在 800px ~ 1200px 之间,近大远小
   -  一定给父元素添加
   -   透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

2.3d旋转 transform:rotate3d(x, y, z, 角度度数);

rotateX X轴旋转

示例代码:
 body {
     /* 父级添加透视 */
     perspective: 400px;
}
img {
    transition: all 1s;
}
img:hover {
    transform: rotateX(360deg);
}
类似单杠旋转沿着x轴上下翻转。注意：默认的旋转中心在盒子的中心位置。

rotateY Y轴旋转

示例代码:
body {
    perspective: 400px;
}
img {
    transition: all 1s;
}
img:hover {
    transform: rotateY(360deg);
}
类似钢管舞沿着Y轴左右旋转。注意：默认的旋转中心在盒子的中心位置。

rotateZ Z轴旋转

示例代码:
 .box {
            perspective: 800px;
            width: 300px;
            margin: 100px auto;
        }
  img {
            width: 300px;
            transition: all 2s;
        }
 .box img:hover {
            transform: rotateZ(160deg);
            /* 1turn 指一圈,也就是360deg */
        }
沿着z轴旋转。注意：默认的旋转中心在盒子的中心位置。

注意:

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

x，y，z 取值为0-1之间的数字

3.3d缩放

目标：使用scale实现空间缩放效果

语法  
transform: scaleX(倍数);  
transform: scaleY(倍数); 
transform: scaleZ(倍数); 
transform: scale3d(x, y, z);

4.3d转换左手法则

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

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

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

5.3d立体呈现

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

写法: transform-style: preserve-3d;

注意: 空间内，转换元素都有自已独立的坐标轴，互不干扰

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立体呈现</title>
    <style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all .5s;
            background-color: pink;
            /* 3d呈现 */
            transform-style: preserve-3d;
        }

        .cube div {
            /* 1.1 添加定位 让2个盒子叠加在一起 */
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }

        .front {
            /* 向我们面前拉（移动） */
            background-color: orange;
            /* transform: translateZ(200px); */
            transform: translateZ(100px);

        }

        .back {
            background-color: green;
            transform: translateZ(-100px);
        }

        .cube:hover {
            transform: rotateY(65deg);
        }
    </style>
</head>

<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>

</html>

动画

1.动画的含义和用法

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

1.动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面

2.构成动画的最小单元：帧或动画帧

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

动画的实现步骤

1.1 定义动画 @keyframes move

@keyframes move {

    from {
        transform: scale(1)
    }
    to {
        transform: scale(1.5)
    }
}

或者也可以写作

    @keyframes dance {

       0% {
        transform: scale(1)
      } 
      100% {
        transform: scale(1.5)
      }
    }

1.2 使用动画 animation:

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

2.动画的属性

使用animation相关属性控制动画执行过程

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

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画
alternate 为反向就是左右来回执行动画（跑马灯）
forwards 动画结束停留在最后一帧状态
linear 让动画匀速执行
动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

多组动画:

   /* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;

CSS复习之空间转换&动画