前言：这是篇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="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也可以同时添加这些组动画，之间只需要用‘，’隔开即可。