CSS3 實現3D旋轉木馬

 

一、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
√	√	×