空间转换，透视，立体呈现，动画空间转换，透视，立体呈现，动画空间转换 transform: translate(x):

空间转换

transform: translate(x):一个参数代表x方向

transform: translate(x, y)

transform: translate3d(x, y, z) 3d的位置

透视属性（添加给父级）

如果想让一个元素有3d效果 1.可以添加透视：persperctive:值

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

（取值：像素单位数值，数值一般在800 – 1200。）

2.仅仅添加透视，只是从正前言观察，可以看到近大远小的效果

空间旋转

transform: rotateZ(值); 顺时针方向

transform: rotateX(值);

transform: rotateY(值);

左手法则 :

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

立体呈现

3.如果想从侧面观察，可以添加transform:rotate3d改变观察的角度

4.前面三个并不能真正的生成 3d 效果，如果需要3d效果，还需要为父容器设置 transform-style:preserve-3d

思考：使用perspective透视属性能否呈现立体图形？

l 答：不能，perspective只增加近大远小、近实远虚的视觉效果。

添加 transform-style: preserve-3d可以使子元素处于真正的3d空间

空间缩放

transform: scaleX(倍数);

transform: scaleY(倍数);

transform: scaleZ(倍数);

transform: scale3d(x, y, z);

1为不缩放大于1为放大小于1为缩小

动画

transition:过渡 1.只能从一个状态到另外一个状态 2.只能做一次 3.需要一个触发，如为宽度变化添加了过渡，那么你得做一个操作让宽度去变化

animation 1.可以添加多个状态--多个关键帧 2.可以做任意次数： animation-interation-count:infinite 3.它可以自动触发

共同点：可以自动的生成中间状态

1.动画名称和动画时长必须赋值

2.取值不分先后顺序

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

animation-timing-function 速度曲线 steps(数字)：逐帧动画

           （第一个时间默认视为动画花费时长）
@keyframes 动画名称 {
    from{
    }
        to {
        }
      }
或者：
@keyframes 动画名称 {
    0%{
    }
    50% {
        }
    100% {
        }
      }

今日案例代码：正方体立体呈现

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

<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>立方体</title>
 <style>
   .box {
     position: relative;
     width: 200px;
     height: 200px;
     margin: 200px auto;
     transform-style: preserve-3d;
     /* perspective: 1000px; */
     transform: rotate3d(1, 1, 0, 330deg);
   }

   .box div {
     position: absolute;
     width: 200px;
     height: 200px;
     background-color: aquamarine;
     opacity: 0.5;
   }

   .box div:nth-child(1) {
     transform: translateZ(100px);
     background-color: blue;
   }

   .box div:nth-child(2) {
     transform: translateZ(-100px) rotate(180deg);
     background-color: aqua;
   }

   .box div:nth-child(3) {
     transform: translateX(-100px) rotateY(-90deg);
     background-color: darkcyan;
   }

   .box div:nth-child(4) {
     transform: translateX(100px) rotateY(90deg);
     background-color: blanchedalmond;
   }

   .box div:nth-child(5) {
     transform: translateY(100px) rotateX(-90deg);
     background-color: rgb(172, 109, 16);
   }

   .box div:nth-child(6) {
     transform: translateY(-100px) rotateX(90deg);
     background-color: rgb(172, 109, 16);
   }
 </style>
</head>

<body>
 <div class="box">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
 </div>
</body>

</html>