CSS3學習筆記--transform基於原始數據（旋轉木馬實例）

時間 2019-11-06

標籤 css3 css 學習筆記 transform 基於原始數據旋轉木馬實例欄目 CSS 简体版

原文原文鏈接

參考連接：好吧，CSS3 3D transform變換，不過如此！javascript

transform-style：preserve-3d屬性要在圖片所在的容器（父元素）中定義，perspective定義在父子元素上的效果不一樣。
對象的Z軸與其平面垂直，所以照片須要先旋轉，再位移；不然全部照片都會擠到一塊兒。
點擊圖片後，都要基於圖片的原始順序和位置進行transform計算。下面是旋轉木馬的javascript代碼、HTML代碼和CSS代碼。

<script type="text/javascript">
    var count = 1;
    function rotateRound(){ //無論第幾回點擊，myCircle取出來的Img列表都是HTML中的原始順序
        var myCircle = document.getElementById("circle").getElementsByTagName("img");
        var i;
        var myImg;
        for(i=0;i<myCircle.length;i++){
              myImg = myCircle[i];    
              myImg.style.transform = "rotateY("+(i-count)*40+"deg) translateZ(300px)";  //每次transform都是基於原始位置，而不是當前視圖顯示的位置。
        }        
        count++;
    };
</script>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>旋轉木馬</title>
<link rel="stylesheet" href="MerryGoRound.css" />
<script type="text/javascript">
    var count = 1;
    function rotateRound(){
        var myCircle = document.getElementById("circle").getElementsByTagName("img");
        var i;
        var myImg;
        for(i=0;i<myCircle.length;i++){
              myImg = myCircle[i];    
              myImg.style.transform = "rotateY("+(i-count)*40+"deg) translateZ(300px)";
        }        
        count++;
    };
</script>
</head>

<body>
    <section id="stage"><center>
    <div id="circle" onclick="rotateRound()">
        <img class="girls one" src="01.jpg" alt="Taboo" />
        <img class="girls two" src="02.jpg" alt="Taboo" />
        <img class="girls three" src="03.jpg" alt="Taboo" />
        <img class="girls four" src="04.jpg" alt="Taboo" />
        <img class="girls five" src="05.jpg" alt="Taboo" />
        <img class="girls six" src="06.jpg" alt="Taboo" />
        <img class="girls seven" src="07.jpg" alt="Taboo" />
        <img class="girls eight" src="08.jpg" alt="Taboo" />
        <img class="girls nine" src="09.jpg" alt="Taboo" />
    </div>        
    </center></section>
</body>

/******************************CSS代碼**********************************************/
#stage {
    width:auto;
    margin:50px 50px;
}
#circle {
    perspective:1200px;
    -moz-transform-style:preserve-3d;
}
.girls {
    width:200px;
    height:300px;
    position:absolute;
    -moz-transition:all 0.3s linear;
}
.one {
    -moz-transform:rotateY(0deg) translateZ(300px); 照片繞城柱形，像旋轉木馬同樣
}
.two {
    -moz-transform:rotateY(40deg) translateZ(300px);
}
.three {
    -moz-transform:rotateY(80deg) translateZ(300px);
}
.four {
    -moz-transform:rotateY(120deg) translateZ(300px);
}
.five {
    -moz-transform:rotateY(160deg) translateZ(300px);
}
.six {
    -moz-transform:rotateY(200deg) translateZ(300px);
}
.seven {
    -moz-transform:rotateY(240deg) translateZ(300px);
}
.eight {
    -moz-transform:rotateY(280deg) translateZ(300px);
}
.nine {
    -moz-transform:rotateY(320deg) translateZ(300px);
}