一、transform: rotateX() rotateY()
先要將圖片進行旋轉。
rotateX(30deg)變成了
有點難理解。附上幾何圖(側面視角)：
rotateY(30deg):
同樣的道理，幾何圖（頂部視角）：
然后就可以將圖片進行旋轉，准備了8張圖片需要旋轉的角度為（360/8 = 45deg）。
<style type="text/css">
._container{width: 300px;height: 150px;margin: 0 auto;}
img{width: 300px;height: 150px;position: absolute;cursor: pointer;}
img:nth-child(1){transform: rotateY(0deg);}
img:nth-child(2){transform: rotateY(45deg);}
img:nth-child(3){transform: rotateY(90deg);}
img:nth-child(4){transform: rotateY(135deg);}
img:nth-child(5){transform: rotateY(180deg);}
img:nth-child(6){ransform: rotateY(225deg);}
img:nth-child(7){transform: rotateY(270deg);}
img:nth-child(8){transform: rotateY(315deg);}
</style>
<body>
<div class="_container">
<img src="img/rotate_translate1.jpg"/>
<img src="img/rotate_translate2.jpg"/>
<img src="img/rotate_translate3.jpg"/>
<img src="img/rotate_translate4.jpg"/>
<img src="img/rotate_translate5.jpg"/>
<img src="img/rotate_translate6.jpg"/>
<img src="img/rotate_translate7.jpg"/>
<img src="img/rotate_translate8.jpg"/>
</div>
</body>
= =接着我們發現圖片都堆成一堆
二、transform-style: preserve-3d;
由於圖片堆在了一起我們給他加個transform-style: preserve-3d;
這樣圖片將以3d視角展示
._container{width: 300px;height: 150px;margin: 0px auto;transform-style: preserve-3d; }
效果圖：
額.......圖片都黏在一起了。
三、transform: translateZ()
這是tranlate的正負值圖。因此我們需要將圖片都沿着Z軸方向平移一定長度。
注意 ：這里的translate坐標為圖片坐標，因此當圖片rotate的時候，坐標也跟着rotate,所以可以將img的tranlateZ都置為相同的值
這樣的話所有圖片都離遠點的Z方向是相同的。
算出了translateZ的值約等於482.86px
img:nth-child(1){transform: rotateY(0deg) translateZ(482.86px); }
img:nth-child(2){transform: rotateY(45deg) translateZ(482.86px); }
img:nth-child(3){transform: rotateY(90deg) translateZ(482.86px); }
img:nth-child(4){transform: rotateY(135deg) translateZ(482.86px); }
img:nth-child(5){transform: rotateY(180deg) translateZ(482.86px); }
img:nth-child(6){transform: rotateY(225deg) translateZ(482.86px); }
img:nth-child(7){transform: rotateY(270deg) translateZ(482.86px); }
img:nth-child(8){transform: rotateY(315deg) translateZ(482.86px); }
效果圖：
有人說看過去怎么跟2d一樣。博主你在逗我么？其實已經是3d視角了。只是我們是從正面看過的。即幾何模型的主視圖。
我們可以將容器_container向前旋轉10deg即（rotateX(-10deg)）.
._container{width: 300px;height: 150px;margin: 100px auto;transform-style: preserve-3d;transform: rotateX(-10deg); }
結果圖：
有點樣子出來了。
四、perspective
這個是個好東西。
為什么有些圖看過去像3d圖呢？
就好比一個正方體在你的面前。當你的視角慢慢的從0~遠離。你看到的正方體會從原來0視角的正方形慢慢的變成正方體。
perspective干的事就是講我們距離屏幕一定視角的圖片成現在顯示器中
所以我們假設perspective:3000px；
就是我們眼睛距離屏幕3000px時觀看到的效果。呈現在顯示器中。
效果圖：
那么問題來了,這個perspective是加在哪個位置呢？
假設我們加在container上面，那么我們的圖片開始轉動的時候（即轉動container==>raotateY()）
那么我們的視角和上面說的translate的坐標一樣會隨的圖片的轉動而變化。
然后出現奇葩的圖片。
因此我們需要在container外面加一個box給box加視角perspective。
即
.box{perspective: 3000px;}
<div class="box">
<div class="container">
...
</div>
</div>
這樣弄的話視角就永遠不會變動，因為轉動的是container。
五、perspective-origin
可能有的人想把外層box設個寬度或者高度什么的。
所以就要設計3d基點設置（perspective-origin）。
前面說perspective視角是屏幕前的位置。現在perspective-origin則為在屏幕內的哪個位置。
即你在正方體前面的500px的位置繞着正方體不同的角度看過去效果也會不同。
這里的3d基點則制定正向位置點。
效果圖：
原始基點為：默認perspective-origin: 50% 50%;
然后就可以設置些js來讓圖片滾動了。
六、代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ._area{ height:250px; width: 1200px; perspective: 3000px; perspective-origin: 599px 146px; margin: 0 auto; padding-top: 100px; } .box{ height: 150px; width: 300px; transform: rotateX(-8deg); transform-style: preserve-3d; transition-duration: 1s; margin: 0 auto; } img{ width: 300px; height: 150px; position: absolute; cursor: pointer; } img:nth-child(1){ transform: rotateY(0deg) translateZ(400px); } img:nth-child(2){ transform: rotateY(45deg) translateZ(400px); } img:nth-child(3){ transform: rotateY(90deg) translateZ(400px); } img:nth-child(4){ transform: rotateY(135deg) translateZ(400px); } img:nth-child(5){ transform: rotateY(180deg) translateZ(400px); } img:nth-child(6){ transform: rotateY(225deg) translateZ(400px); } img:nth-child(7){ transform: rotateY(270deg) translateZ(400px); } img:nth-child(8){ transform: rotateY(315deg) translateZ(400px); } ul{ list-style: none; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } li{ background-color: #000; width: 10px; height: 10px; border-radius: 50%; float: left; margin-left: 5px; cursor: pointer; } </style> </head> <body> <div class="_area"> <div class="box"> <img src="img/rotate_translate1.jpg"/> <img src="img/rotate_translate2.jpg"/> <img src="img/rotate_translate3.jpg"/> <img src="img/rotate_translate4.jpg"/> <img src="img/rotate_translate5.jpg"/> <img src="img/rotate_translate6.jpg"/> <img src="img/rotate_translate7.jpg"/> <img src="img/rotate_translate8.jpg"/> </div> <ul> <li style="background-color: #666;"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> <script type="text/javascript"> var x = 0; var index = 0; var timer; var box = document.getElementsByClassName("box")[0]; var li = document.getElementsByTagName("ul")[0].getElementsByTagName("li"); //滾動函數 function roll(){ x =x - 45; index = (index == 7)?0:(index+1); for(var i=0;i<li.length;i++){ li[i].style.backgroundColor = "#000"; } li[index].style.backgroundColor = "#666"; box.style.transform = "rotateX(-8deg) rotateY("+x+"deg)"; } //切換頁面的時候調用(切換頁面時本頁面還在計時,防止切換頁面回來時瞬間快速滾動。) var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null; var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange'); //替換hiddenProperty中的hidden(忽略大小寫即Hidden也會被替換形成webkitvisibilitychange) var onVisibilityChange = function(){ if (!document[hiddenProperty]) { timer = setInterval(roll,2000); }else{ clearInterval(timer); } } document.addEventListener(visibilityChangeEvent,onVisibilityChange); //點擊圖片滾動 box.onclick = function(){ clearInterval(timer); roll(); setTimeout(function(){ clearInterval(timer); timer = setInterval(roll,2000); },2000); } timer = setInterval(roll,2000); //點擊小圓點滾動 for(var i =0;i<li.length;i++){ li[i].xuhao = i; li[i].onclick = function(){ clearInterval(timer); for(var i=0;i<li.length;i++){ li[i].style.backgroundColor = "#000"; } li[this.xuhao].style.backgroundColor = "#666"; x = x+(index-this.xuhao)*45; box.style.transform = "rotateX(-8deg) rotateY("+x+"deg)"; index = this.xuhao; setTimeout(function(){ clearInterval(timer); timer = setInterval(roll,2000); },2000); } } </script> </html>
效果圖：
七、兼容性
盡管perspective支持IE10
transform-style支持不了IE。所以只能跟IE say goodbye.
| chrome | firefox | IE |
| √ | √ | × |