空间转换和动画

一、3D空间转换

1、3D坐标系：3D坐标系比2D 多了一个Z轴

 水平方向为X轴 向右移动为正值，向左移动为负值

垂直方向为Y轴 向下移动为正值，向上移动为负值

人的目光看向电脑屏幕的方向为Z轴 从电脑屏幕到人的眼睛方向为正值，从电脑屏幕到里面为负值

2、3D位移

完整写法：teansform:translate3d(x,y,z)

只不过很多情况下我们会选择分开来写

teansform:translateX(100px)

teansform:translateY(100px)

teansform:translateZ(100px)

3、透视效果

正常情况下，在我们现实生活中，我们看远处的物体都是比较小 比较虚幻的，看近处的物体时，都是比较大 比较清晰的

所以在空间转换时，为元素添加近大远小、近实远虚的视觉效果

3D直观效果

在代码中， perspective:数字+px 就可以实现这个效果，其中的数字代表着我们的眼睛到屏幕之间的距离，所以我们一般不会设置的特别大，也不会设置的特别小

因此（重点）注意：

其取值范围一般在800px~1200px之间

一定要给父元素添加

4、3D旋转

有了透视效果的加持，我们3D旋转效果会更加明显

rotateX 围绕x轴旋转，可以将x轴当做单杠，做单杠旋转

 

rotateY 围绕y轴旋转，类似于钢管舞

 

5、左手法则

可以更轻松地理解x轴、y轴的旋转

大拇指指向x轴正值方向，其余四指指向的方向便是旋转的正方向

大拇指指向y轴正值方向，其余四指指向的方向便是旋转的正方向

6、立体呈现

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

transform-style: preserve-3d;

3D旋转

二、动画        可以不用鼠标触发，自动的 反复的执行某些动画

1、动画分为定义 和 调用

        ①定义

定义动画有两种方式：

方法一：from作为初始状态        to作为结束状态

 @keyframes 动画名称 {

         from {

                transform: scale(1)

            }

            to {

                transform: scale(1.5)

            }

        }

        方法二：用百分比显示不同时段 所显示的动画

@keyframes 动画名称 {

            0% {

             transform: scale(1)

           }

       

           100% {

             transform: scale(1.5)

           }

        }

        ②调用

选择器{

       (使用动画) animation: （动画名称)move  （执行时间)2s  （匀速)linear  （循环)infinite 

} 

2、动画属性

①动画名称参照css类选择器命名

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

③infinite无线循环动画（重复次数）

④alternate 来回摆动，（就像以前的摆钟）

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

⑥linear 让动画匀速执行

3、鼠标经过时，暂停动画

鼠标经过box，ul暂停动画

.box:hover ul {
    animation-play-state: paused;
}

4、多组动画

当我们想要2个，甚至是多个动画一起执行时，它的一个复合写法

animation:动画1，动画2，...动画n

animation: moveone 1s steps(12) infinite, movetwo 5s linear forwards;