前言：这是篇CSS3中关于3D效果与动画相关的内容。
（1）在CSS3的3D效果中，需要结合透视perspective的属性才能看到3d的效果，这个属性在屏幕上实现了元素近大远小的效果，所以要使用CSS3的3d相关属性，需要记得写perspective。
（2）在CSS3的3d坐标系与数学中的坐标系有所区别，主要是在y轴正方向的规定上。
x轴正方向：从左往右
y轴正方向：从上至下
z轴正方向：从里至外
旋转
在C3的2D变换中，rotate代表了元素围绕Z轴旋转一个角度，3d中还有围绕X和Y轴旋转。
1.rotateX：值 单位：deg
让元素围绕着X轴进行旋转
人眼正视X轴正方向，正值是顺时针方向，负值时逆时针方向。
没有透视的3D是看不出来方向
加perspective后看到的效果就是正值元素向屏幕里倒，负值向屏幕外倒。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
perspective: 600px;
}
.box{
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transform: rotateX(45deg);
transition: all ease .5s;
}
.box:hover{
transform: rotateX(-45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.rotateY:值
围绕着Y轴进行旋转
正数是逆时针 （站在右边推门），负数是顺时针（站在左边推门）
人眼正视y轴正方向，正值是顺时针方向，负值时逆时针方向。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
perspective: 600px;
}
.box{
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transform: rotateY(45deg);
transition: all ease .5s;
}
.box:hover{
transform: rotateY(-45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3.rotate3d(x,y,z,deg);
rotate3d将rotateX，rotateY，rotateZ3个属性结合起来写，它的参数值x、y、z表示了旋转的3个方向，取值是0～1，deg表示了旋转的角度。（这个属性的具体用法目前不太会使用，使用时经常不能出现预期结果，可能使用方式不对，以后研究。）
平移
在2d变换中translateX和translateY，代表沿X轴和Y轴平移，3d中还有translateZ，沿Z轴平移。
translateZ
就是在Z轴上来回移动，但是如果没有透视的情况下，完全看不出效果，所以，一般transform：translateZ（）都是配合透视一起使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
perspective: 900px;
}
.box{
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transition: all 2s;
}
.current{
/*transform: rotateX(360deg) translateZ(500px);*/
transform:translateZ(500px) rotateX(360deg);
}
</style>
</head>
<body>
<div class="box"></div>
<button>点我呀</button>
<script type="text/javascript">
var btn = document.querySelector('button');
var box = document.querySelector('.box');
btn.onclick = function(){
box.classList.add('current');
}
</script>
</body>
</html>
其它：translateZ和rotate结合会产生不一样的3D效果，不同的顺序的效果截然不同，如果先rotate 在translateZ 元素是在空间里面发生旋转 而如果是translateZ在rotate 元素是在直线上发生旋转。
其它3D相关属性
1.透视：perspective:值
距离屏幕的多远看元素，实现近大远小的效果。
说明：透视值越小，透视效果越强，值越大，透视效果越弱，透视添加在父级身上
2.透视点 perspective-origin：值
最后看看到透视消失的地方，值可以是像素，也可以是百分比，还可以是方位名词，默认值是50%，50%（中心点）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 155px;
height: 220px;
border: 1px solid #000;
margin: 100px auto;
/* 说明：透视值越小，透视效果越强，值越大，透视效果越弱，透视添加在父级身上 */
perspective: 1px;
perspective-origin: 50% 50%;
}
img{
transition: all 1s;
transform-origin: bottom;
}
.box:hover img{
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="box">
<img src="data:image/shu.jpg" alt="">
</div>
</body>
</html>
3.transform-style
规定被嵌套元素如何在3D空间中显示:flat是默认值，让子元素不保留其3D位置， preserve-3d 让子元素保留其3D位置 ，加在父亲身上.
小总结：透视 灭点 transform-style都是添加在父级身上，当元素发生3D翻转的时候，整个坐标系也跟着发生了翻转。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
perspective: 900px;
}
.box{
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
perspective: 900px;
transform: rotateY(70deg);
transform-style: preserve-3d;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
margin: 50px auto;
transform: rotateX(45deg);
transform-origin: top;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
动画 animation：值
animation属性有8个参数值：
- animation-name:自定义动画名
animation-duration:动画的持续时间 单位是s或者ms
animation-timing-function:动画的曲线
animation-delay:动画从何时开始
animation-iteration-count:控制动画执行的次数 没有单位， 一直执行：infinite
aniamtion-direction:控制动画是否逆序播放 默认值normal 逆序：alternate
animation-play-state:控制动画的播放和暂停 默认值是播放：running 暂停：paused
animation-fill-mode:动画最后的停留位置 forwards 让动画停留在最后一帧
动画一定要先写animation 然后搭配@keyframes去写自定义的动画。 注意：animation和@keyframes最好都添加私有前缀。 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
position: absolute;
left: 100px;
top: 100px;
background-color: pink;
/* -webkit-animation: feifei 2s linear 0s;
-moz-animation: feifei 2s linear 0s;
-ms-animation: feifei 2s linear 0s;
-o-animation: feifei 2s linear 0s; */
animation: feifei 2s linear 0s;
}
/* 单组动画 */
@keyframes feifei{
from{
width: 200px;
height: 200px;
transform: rotate(0deg);
}
to{
width: 400px;
height: 400px;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
如果使用@keyframes规定了多组动画规则，animation也可以同时添加这些组动画，之间只需要用‘，’隔开即可。
