空间变换和动画

1、空间变换

1.1、空间转换

transform:translateX(200px)
transform:translateY(200px)
transform:translateZ(200px)

/* 浏览器或者当前页面是平面的，没有z轴 /
/* 需要一个观察者，通常给父级元素（通常是body）添加透视perspective */

   body {
            perspective: 800px;
            /* 视距（透视）通常800~1200px */
        }

1.2、空间旋转（X,Y,Z）

transform: rotateX(60deg);

1左手法则判断旋转方向

2自定义旋转轴（通常用于设置对角线的旋转轴 ）/* rotate3d X,Y.Z,角度 / / xyz取0~1 */

 /* 对角线写法 */
  transform: rotate3d(1,1,0,100deg);

1.3 3d立体效果

 transform-style: preserve-3d;
 /* 为需要3d效果的容器开启3d立体属性 */

1.4、2d缩放scale

transform:scale(2,3) 宽的2倍，高的三倍，一般只给一个值

1.5、综合写法

  transform: translate() rotate() scale();

2、动画animation

2.1、定义动画，使用动画

 .box{
            width: 800px;
            height: 800px;
            background-color: aqua;
            margin: 100px auto;
           
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: olive;
            /*使用动画*/
            /* 调用动画（推荐直接用复合属性写） */
            /* 参数1：动画名称  必须属性*/
            /* 参数2：完成动画时长  必须属性 */
            /* 参数3：运动曲线 匀速：linear */
            /* 参数4：延迟执行时间 */
            /* 参数5：动画次数，数字也可以是infinite(无限播放) */
            /* 参数6：规定下一周期逆向播放  alternate*/
            /* 参数7：动画正在运行或者暂停running、paused*/
            /* 参数8：动画结束状态保持forwards、回到起始backwords */
             animation: move 3s 1s linear 2 alternate;
         
        }
        @keyframes move{
            /* 规定动画 */
            0%{}

            25%{
                transform: translate(700px,0);
            }
            50%{
                transform: translate(700px,700px);
            }
            75%{
                transform: translate(0,700px);
            }
            100%{
                transform: translate(0,0);
            }
        }
         /*html*/
     <div class="box">
        <div class="son"></div>
       </div>

2.2、逐帧动画 steps() ,用了就不能用linear

![请添加图片描述](https://img-blog.csdnimg.cn/7ee5b381ebfc4022ba2cc9ca973f2b19.jpeg