運用CSS3 3D轉換實作案例—旋轉木馬

1.首先搭建HTML結構

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>
           

   裡面的六個div分别是想要插入的圖檔

   最後旋轉的還是section這個标簽

2.CSS樣式

    1.給body添加透視效果 perspective：1000px;

    2.給section添加3d呈現效果控制裡面的6個div

    3.裡面的六個div全部絕對定位疊到一起，然後移動不同角度旋轉和距離

              角度用rotateY，距離用translateZ來控制

     4.給section添加動畫animation，即可自動旋轉

body{
    /*添加透視*/
    perspective: 1000px;
}


section{
    position: relative;
    width: 300px;
    height: 200px;
    /*為子盒子開啟三維立體環境*/
    transform-style: preserve-3d;
    /*誰做動畫給誰加*/
    animation: play 10s linear infinite;
}
/*滑鼠經過  停止旋轉*/
section:hover{
    animation-play-state: paused;

}
@keyframes play{
    0%{
        transform: rotateY();
    }
    100%{
        transform: rotateY(360deg);
    }

}
section div{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('輸入圖檔');
}
section div:nth-child(1){
    transform: translateZ(300px);
}
section div:nth-child(2){
    transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(1){
    transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(1){
    transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(1){
    transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(1){
    transform: rotateY(300deg) translateZ(300px);
}