## 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>
