过渡，2D，3D 转换

/ 设置动画结束时，盒子的状态（forwards：保持动画结束后的状态（默认），backwards：动画结束后回到最初的状态）animation-timing-function: ease-in;// 运动曲线:linearease-in-outsteps()间断地分成几步执行。// 动画的执行次数（iteration的含义表示迭代）`infinite`表示无数次。// 执行一次动画的持续时间（

数据潜水员

1258人浏览 · 2024-11-02 16:13:53

数据潜水员 · 2024-11-02 16:13:53 发布

## 3D 转换

### 1、旋转：rotateX、rotateY、rotateZ

```javascript

transform: rotateX(360deg); //绕 X 轴旋转360度

transform: rotateY(360deg); //绕 Y 轴旋转360度

transform: rotateZ(360deg); //绕 Z 轴旋转360度

```

1. rotateY 举例：

```html

    <style>

        .rotateY {

            width: 237px;

            height: 300px;

            margin: 100px auto;

            perspective: 150px;     /* 透视 */

        }

        img {

            transition: all 2s;  /* 过渡 */

        }

        .rotateY:hover img {

            transform: rotateY(360deg);

        }

    </style>

<body>

<div class="rotateY">

    <img src="images/y.jpg" alt=""/>

</div>

</body>

```




```html

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body {

            background-color: cornflowerblue;

        }



        .box {

            width: 300px;

            height: 300px;

            /*border: 1px solid #000;*/

            margin: 50px auto;

            position: relative;

        }



        .box > div {

            width: 100%;

            height: 100%;

            position: absolute;

            /*border: 1px solid #000;*/

            border-radius: 50%;

            transition: all 2s;

            backface-visibility: hidden;

        }



        .box1 {

            background: url(images/bg.png) left 0 no-repeat; /*默认显示图片的左半边*/

        }



        .box2 {

            background: url(images/bg.png) right 0 no-repeat;

            transform: rotateY(180deg); /*让图片的右半边默认时，旋转180度，就可以暂时隐藏起来*/



        }



        .box:hover .box1 {

            transform: rotateY(180deg); /*让图片的左半边转消失*/

        }



        .box:hover .box2 {

            transform: rotateY(0deg); /*让图片的左半边转出现*/

        }

    </style>

</head>

<body>

<div class="box">

    <div class="box1"></div>

    <div class="box2"></div>

</div>

</body>

</html>

```

### 2、移动：translateX、translateY、translateZ

```javascript

transform: translateX(100px); //沿着 X 轴移动

transform: translateY(360px); //沿着 Y 轴移动

transform: translateZ(360px); //沿着 Z 轴移动

```

2. translateZ 举例：

 <style>

        body {

            /* 给box的父元素加透视效果*/

            perspective: 1000px;

        }



        .box {

            width: 250px;

            height: 250px;

            background: green;

            transition: all 1s;

            margin: 200px auto

        }

        .box:hover {

            /* translateZ必须配合透视来使用*/

            transform: translateZ(400px);

        }

    </style>

<body>

<div class="box">

</div>

</body>

### 3、透视：perspective

- 两种写法：

- 作为一个属性，设置给父元素，作用于所有3D转换的子元素

- 作为 transform 属性的一个值，做用于元素自身。

```css

perspective: 500px;

```

### 4、3D呈现（transform-style）

```css

transform-style: preserve-3d; /* 让子盒子位于三维空间里 */

transform-style: flat; /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */

```

## 动画

### 1、定义动画的步骤

（1）通过@keyframes定义动画；

（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；

（3）在指定元素里，通过 `animation` 属性调用动画。

```javascript

定义动画：

@keyframes 动画名{

from{ 初始状态 }

to{ 结束状态 }

}

调用：

animation: 动画名称持续时间；

animation: 定义的动画名称持续时间执行次数是否反向运动曲线延迟执行。(infinite 表示无限次)

animation: move1 1s alternate linear 3;

animation: move2 4s;

```

**定义动画的格式举例：**

```html

    <style>

        .box {

            width: 100px;

            height: 100px;

            margin: 100px;

            background-color: red;



            /* 调用动画*/

            /* animation: 动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。infinite 表示无限次*/

            /*animation: move 1s  alternate linear 3;*/

            animation: move2 4s;

        }



        /* 方式一：定义一组动画*/

        @keyframes move1 {

            from {

                transform: translateX(0px) rotate(0deg);

            }

            to {

                transform: translateX(500px) rotate(555deg);

            }

        }



        /* 方式二：定义多组动画*/

        @keyframes move2 {

            0% {

                transform: translateX(0px) translateY(0px);

                background-color: red;

                border-radius: 0;

            }



            25% {

                transform: translateX(500px) translateY(0px);



            }



            /*动画执行到 50% 的时候，背景色变成绿色，形状变成圆形*/

            50% {

                /* 虽然两个方向都有translate，但其实只是Y轴上移动了200px。

                因为X轴的500px是相对最开始的原点来说的。可以理解成此时的 translateX 是保存了之前的位移 */

                transform: translateX(500px) translateY(200px);

                background-color: green;

                border-radius: 50%;

            }



            /*动画执行到 100% 的时候，背景色还原为红色，形状还原为正方形*/

            100% {

                /*坐标归零，表示回到原点。*/

                transform: translateX(0px) translateY(0px);

                background-color: red;

                border-radius: 0;

            }

        }

    </style>

<body>

<div class="box">

</div>



```

### 2、动画属性

- animation属性如下：

```javascript

animation-name: move; // 动画名称

animation-duration: 4s; // 执行一次动画的持续时间（上面两个属性，是必选项，且顺序固定）

animation-iteration-count: 1; // 动画的执行次数（iteration的含义表示迭代）`infinite`表示无数次

animation-direction: alternate; // 动画的方向（normal 正常，alternate 反向）

animation-delay: 1s; // 动画延迟执行

animation-fill-mode: forwards; // 设置动画结束时，盒子的状态（forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态）

animation-timing-function: ease-in; // 运动曲线:linear ease-in-out steps()间断地分成几步执行

### steps()的效果

```javascript

animation: move2 4s steps(2);

```

3. step()举例：时钟的简易模型


    <style>

        div {

            width: 3px;

            height: 200px;

            background-color: #000;

            margin: 100px auto;

            transform-origin: center bottom;    /* 旋转的中心点是底部 */

            animation: myClock 60s steps(60) infinite;

        }



        @keyframes myClock {

            0% {

                transform: rotate(0deg);

            }



            100% {

                transform: rotate(360deg);

            }

        }

    </style>

<div></div>