空间转换3D和动画(简介)

一.空间转换3D

1.3D坐标系

3D 坐标系比2D 多了一个Z轴。

<style>
        body {
            perspective: 800px;
        }
        /* 透视 为了看到z轴效果 */
        /* 取值一般为800到1200 */

        .box {
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 100px auto;
            transition: all 2s;
        }

        .box:hover {
            transform: translate3d(200px, 200px, 200px);
        }
    </style>

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

语法:perspective: 800px;

语法注意事项

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

2. 一定给父亲添加

3. 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。translateZ 的距离越靠近我们，盒子越大.z轴面对自己方向是正值,也就是值越大盒子越靠近我们.

2.3D旋转

rotateX    类似单杠旋转

rotateY    类似钢管舞

rotateZ    类似平面上风车旋转

    <style>
        .box {
            perspective: 800px;
            width: 200px;
            height: 200px;
            margin: 100px auto;
        }

        .box img {
            width: 100%;
            height: 100%;
            transition: all 2s;
        }

        .box:hover img {
            /* transform: rotateX(360deg); */
            /* transform: rotateY(180deg); */
            transform: rotateZ(360deg);
        }
    </style>

左手法则

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

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

3. 大拇指指向z轴面向我们自己， 则四指指向的方向是旋转的方向

立体呈现

   
        * {
            margin: 0;
            padding: 0;

        }

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 100px auto;
            transform-style: preserve-3d;
            transition: all 2s;
        }
        .box:hover {
            transform: rotateY(360deg);
        }

        .box .one,
        .box .two {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .one {
            background-color: blue;
            /* transform: translateX(100px); */
            transform: translateZ(-100px);
        }

        .two {
            background-color: chartreuse;
            transform: translateZ(100px);
        }

让子盒子在父盒子内有空间的展示，此时可以给父元素添加transform-style: preserve-3d;

3.3D缩放

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            perspective: 800px;
        }
        .box {
            width: 400px;
            height: 400px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 1s;
        }
        .box:hover {
            /* transform: scaleX(2); */
            /* transform: scaleY(0.5); */
            transform: scaleZ(10) rotateX(90deg);
        }
    </style>

scalex 放大的是宽 

scaley 放大的是高 

scalez z轴必须配合透视+旋转一起使用

二.动画

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

@keyframes定义一个动画  from来自哪里  to去往哪里  animation调用动画

也可以用百分比来代替from和to,   0%相当于from    100%相当于to   

动画使用分为定义和调用：

动画属性

1. 动画名字参照css类选择器命名

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

3. infinate 无限循环动画（重复次数）

4. alternate 为反向 就是左右来回执行动画（跑马灯）

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

6. linear 让动画匀速执行

/* 鼠标经过box，  则 ul 停止动画 */
.box:hover ul {
    animation-play-state: paused;
}

鼠标经过暂停动画

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

多组动画,中间用逗号隔开

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            animation: move 1s linear 1s infinite alternate;
        }
        img {
            width: 100%;
            height: 100%;
        }
        @keyframes move {
            0% {
                transform: translate(0,0) scale(1) rotate(10turn);
            }
            25% {
                transform: translate(1000px,10px) scale(0.3) rotate(2turn);
            }
            50% {
                transform: translate(750px,600px) scale(4) rotate(20turn);
            }
            75% {
                transform: translate(400px,500px) scale(2) rotate(5turn);
            }
            100% {
                transform: translate(0,0) scale(1.5) rotate(4turn);
            }
        }
    </style>