1.3D坐標系
3D坐標可以用左手來模擬，其中大拇指方向默認是X軸正方向，食指方向是Y軸正方向，中指方向是Z軸正方向。注意：當設置transform：rotateX（90deg）時，相當於將X軸轉動90°，此時Z軸正方向向上，所以設置transform：translateZ(150px)時，就產生了3D立方體的上面，具體原理可以通過chrome瀏覽器審查元素來調試。
2.3D視圖
transform-style：flat(默認，二維效果) / preserve-3d(三維效果)。設置一個元素的transform-style:preserve-3d；只影響這個元素的子元素(如果孫元素也有3d效果，那么還必須給子元素設置preserve-3d)。這樣所有子元素都可以相對與父元素的平面進行3d變形操作。和二維變形一樣，三維變形可以使用transform屬性來設置。可以通過制定的函數或者通過三維矩陣來對元素變型。列舉幾個函數：
translate3d(x,y,z) 使元素在這三個緯度中移動,也可以分開寫，如：translateX(length),translateY(length), translateZ(length)。注意z軸的值只能為px;
scale3d(number,number,number) 使元素在這三個緯度中縮放，也可分開寫，如：scaleX(),scaleY(),scaleY()。
rotateX(angle) 是元素依照x軸旋轉；
rotateY(angle) 是元素依照y軸旋轉；
rotateZ(angle) 是元素依照z軸旋轉。
3.perspective和transform-style的設置問題
（1）當設置perspective(length);不設置transform-style:preserve-3d；當元素靜止時，會有立體的效果：
（2）當設置perspective(length);不設置transform-style:preserve-3d；當元素旋轉時的效果：
（3）當設置transform-style:preserve-3d；不設置perspective(length);當元素靜止時，不會有立體的效果：
（4）當設置perspective(length);不設置transform-style:preserve-3d；當元素旋轉時的效果：
注意：（1）如果一個元素以x軸或y軸旋轉90度以上的話，那么它的背面將面向用戶。背面的元素始終是透明的，所以用戶通過后面看到正面的反向形態，就像是從在玻璃門后面看對外張貼的標志。為了防止顯示鏡像的前面。可以將backface-visibility設置為hidden;如果backface-visibility:hidden;那么這個元素就不會在背面可見了。這么做的一個原因就是，想一個元素有兩個面，就像一個撲克牌。比如：創建一張撲克牌，正面和背面一定不一樣，這兩個面的位置是背靠背的。這兩個元素一起轉動，正面逐步向后反轉隱藏，同時背面向前反轉並出現。如果背面的元素是可見的，旋轉時它將掩蓋它底下的元素，而不是露出它下面的元素。
（2）如果父元素設置overflow：hidden；那么子元素就無法跳出父元素的平面，也就不能出現3D效果。就如同，transform-style：flat；
3.自己做得3D立方體
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0;} .box{ width: 200px; height: 200px; margin: 100px auto; font-size: 30px; color:red; line-height: 200px; position: relative; text-align: center; perspective:1000px; transform-style: preserve-3d; transform:rotateX(-30deg) rotateY(30deg); } .front, .back, .left, .right, .top, .bottom{ width: 100%; height: 100%; opacity: 0.5; position: absolute; left: 0; top: 0; } .front{ background-color: pink; transform: translateZ(100px); } .back{ background-color: orange; transform: translateZ(-100px); } .left{ background-color: blue; transform: rotateY(-90deg) translateZ(100px); } .right{ background-color: red; transform: rotateY(90deg) translateZ(100px); } .top{ background-color: green; transform: rotateX(-90deg) translateZ(-100px); } .bottom{ background-color: yellowgreen; transform: rotateX(-90deg) translateZ(100px); } </style> </head> <body> <div class="box"> <div class="front">front</div> <div class="back">back</div> <div class="left">left</div> <div class="right">right</div> <div class="top">top</div> <div class="bottom">bottom</div> </div> </body> </html>
4.詳細說明參照原地址
http://www.cnblogs.com/duanhuajian/archive/2012/08/30/2664026.html
5.擴展內容
有了3D的原理，我們就可以實現3D輪播圖動畫效果了，原理就是每個li標簽有4個面，分別是前 、后、 上、下，相當於剔除了3D立方體的左右兩面，再將每個li標簽添加過渡動畫：transition:all 1s linear;並且每個li之間必須有延時操作，代碼中的圖片自己可以從網上下載，但是注意圖片的大小跟盒子的大小要匹配，具體參照如下源碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D輪播圖</title> <style> html,body{ height: 100%; } body{ margin: 0; padding: 0; background-color: #F7F7F7; } .banner{ width: 560px; height: 300px; margin: 100px auto; border: 1px solid #CCC; position: relative; } ul{ list-style: none; margin: 0; padding: 0; height: 100%; } li{ position: absolute; top: 0; width: 112px; height: 100%; background-color: green; transform: rotateX(0deg); transform-style: preserve-3d; transition: all 1s; } li:nth-child(1){ left: 0; } li:nth-child(2){ left: 112px; } li:nth-child(3){ left: 224px; } li:nth-child(4){ left: 336px; } li:nth-child(5){ left: 448px; } span{ display: block; height: 100%; width: 100%; position: absolute; left: 0; top: 0; } li span:nth-child(1){ transform: translateZ(150px); background-image: url(images/1.jpg); } li span:nth-child(2){ transform: rotateX(90deg) translateZ(150px); background-image: url(images/2.jpg); } li span:nth-child(3){ transform: rotateX(180deg) translateZ(150px); background-image: url(images/3.jpg); } li span:nth-child(4){ transform: rotateX(270deg) translateZ(150px); background-image: url(images/4.jpg); } li:nth-child(1) span{ background-position: 0 0; } li:nth-child(2) span{ background-position: -112px 0; } li:nth-child(3) span{ background-position: -224px 0; } li:nth-child(4) span{ background-position: -336px 0; } li:nth-child(5) span{ background-position: -448px 0; } .prev, .next{ display: block; width: 60px; height: 60px; text-align: center; line-height: 60px; font-size: 40px; color: #FFF; text-decoration: none; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 50%; margin-top: -30px; } .next { right: 0; } </style> </head> <body> <div class="banner"> <ul> <li> <span></span> <span></span> <span></span> <span></span> </li> <li> <span></span> <span></span> <span></span> <span></span> </li> <li> <span></span> <span></span> <span></span> <span></span> </li> <li> <span></span> <span></span> <span></span> <span></span> </li> <li> <span></span> <span></span> <span></span> <span></span> </li> </ul> <a href="javascript:;" class="prev"><</a> <a href="javascript:;" class="next">></a> </div> <script src="jquery.min.js"></script> <script> var current = 0; $('.prev').on('click',function(){ current--; $('li').each(function(key){ $(this).css({ 'transform':'rotateX('+current*90+'deg)', 'transition-delay':key*0.25+'s' }); }); }); $('.next').on('click',function(){ current++; $("li").each(function(key){ $(this).css({ 'transform':'rotateX('+(-current)*90+'deg)', 'transition-delay':key*0.25+'s' }); }); }); </script> </body> </html>