通俗讲解transform3D变换时css各属性的作用与搭配
当没有浏览器兼容性限制时，就大胆地使用transiton的3D效果吧，前端也要做不一样的烟火！
*常用的3D效果
rotateX/rotateY/rotateZ/rotate3d
translateX/translateY/translateZ/translate3d
基础的效果属性就不多说，下面说一下修饰属性：
1.perspective
视距，又叫做景深，描述为眼睛到目标元素的距离：
此属性添加在3D变换元素的父级元素上
#box { width: 100px; height: 100px; border: 1px solid #000; padding: 100px; -webkit-perspective: 200px; perspective: 200px; } #div { width: 100px; height: 100px; background: red; transition: 1s; }
2.transform-style
描述：元素在做3d变换时，是否保留子元素的3d变换
属性值：
（1）flat 不保留
（2）preserve-3d 保留子元素3D变换
不保留时旋转130deg的效果：
保留时旋转130deg的效果：
3.perspective-origin
描述为: 视线方向，站在增加此属性的元素的指定位置，详见下图
从底部正中央看，旋转130deg后的效果：
perspective-origin: center bottom;
从顶部正中央看旋转13deg的效果：
perspective-origin: center top;
4.backface-visibility: hidden;
描述为：隐藏背面（和父级角度相反相对的即为背面）
正面效果：
旋转150deg后
旋转180deg后
代码贴在下面，可自己运行查看：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no" /> <title>Document</title> <style type="text/css"> #box { width: 100px; height: 100px; border: 1px solid #000; padding: 100px; -webkit-perspective: 200px; perspective: 200px; } #div { width: 100px; height: 100px; background: red; transition: 3s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; } #div span { position: absolute; left: 0; top: 0; width: 100px; height: 100px; display: block; font-size: 50px; text-align: center; color: #fff; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #div span:nth-of-type(1){ background: red; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } #div span:nth-of-type(2){ background: green; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } #div em { display: block; text-align: center; line-height: 100px; font-style: normal; -webkit-transform: translateZ(20px); transform: translateZ(20px); } </style> <script type="text/javascript"> document.addEventListener('touchstart', function(e) { e.preventDefault(); }); window.onload = function(){ var div = document.querySelector('#div'); div.addEventListener('touchend', function(e) { div.style.WebkitTransform = div.style.transform = "rotateY(180deg)"; }); }; </script> </head> <body> <div id="box"> <div id="div"> <span><em>正</em></span> <span><em>反</em></span> </div> </div> </body> </html>
