我們來製作一個小黃鴨轉圈跳舞的頁面。

分析一下

1、分析一下這個頁面，要完成這些效果，一共需要3步：

• 把鴨子都放到一個盒子當中
• 在盒子裡，把每個鴨子的位置擺好
• 讓盒子旋轉

2、讓鴨子在盒子中的位置擺好，需要怎麼做：

• 先讓鴨子站在圓心的位置（需要先了解父相子絕定位方式）
• 沿一個方向移動一個半徑的距離（3d）
• 每個鴨子旋轉一個角度，讓鴨子均勻的分佈一圈

開始寫程式碼

要用到的知識包括幾個HTML標籤和一部分的css知識。

先把圖片放到頁面裡邊。

先來在頁面中新增一個img標籤，將小黃鴨跳舞的gif圖放到標籤中

<img src="img/001.gif" alt="">
 

這個時候，可以看到，頁面中已經有一個小黃鴨了。

把圖片放到一個盒子裡邊

<div class="box">
    <img src="img/001.gif" alt="">
</div>

這個時候盒子看不到，我們通過選擇器，來給盒子新增一個邊框，好看到它

<style>
    .box{
        border: 1px solid red;
    }
</style>

盒子很大，比鴨子大很多。

我們把盒子的大小設定成跟鴨子圖片的大小一樣

.box{
    border: 1px solid red;
    width: 140px;
    height: 172px;
}
 

接下來呢，讓小黃鴨顯示在頁面的中間。

.box{
    border: 1px solid red;
    width: 140px;
    height: 172px;
    /*margin-right: auto ;*/
    /*margin-left: auto ;*/
    margin: 0 auto;
}

這個時候，盒子跟盒子裡的鴨子都居中了。

我們再新增其他的鴨子。

<div class="box">
    <img src="img/001.gif">
    <img src="img/002.gif">
    <img src="img/003.gif">
    <img src="img/004.gif">
    <img src="img/005.gif">
    <img src="img/006.gif">
    <img src="img/007.gif">
    <img src="img/008.gif">
    <img src="img/009.gif">
</div>
 

發現鴨子是豎著排成一列的

我們先要把所有的鴨子放到圍繞旋轉的圓心處，所以，所有的鴨子應該是在同一個位置。怎麼把鴨子都放在圓心處呢。我們需要先學習一個定位方式：父相子絕定位。

重要內容補充-定位方式的講解

相對定位，絕對定位。

重要內容補充-3D圖形佈局講解

需要進行3D佈局的元素，父元素加上一個樣式：

transform-style: preserve-3d;

只加上這個，沒有效果，需要跟transform配合使用

transform-style: preserve-3d;

/*設定旋轉繞X軸*/ 
transform: rotateX(-10deg);   

開始寫程式碼

把所有鴨子放到同一個位置

利用父相子絕定位，把父盒子設定成相對定位，子盒子設定成絕對定位

.box{
    border: 1px solid red;
    width: 140px;
    height: 172px;
    /*margin-right: auto ;*/
    /*margin-left: auto ;*/
    margin: 0 auto;
    position: relative;
}

img{
    position: absolute;
}

讓鴨子面向不同的方向，在360度內均勻分佈

設定父盒子的3D效果，給每個圖片新增一個類名，給每個圖片，設定不同的旋轉角度。

<div class="box">
    <img src="img/001.gif" class="img1">
    <img src="img/002.gif" class="img2">
    <img src="img/003.gif" class="img3">
    <img src="img/004.gif" class="img4">
    <img src="img/005.gif" class="img5">
    <img src="img/006.gif" class="img6">
    <img src="img/007.gif" class="img7">
    <img src="img/008.gif" class="img8">
    <img src="img/009.gif" class="img9">
</div>

<style>
    .box {
        border: 1px solid red;
        width: 140px;
        height: 172px;
        /*margin-right: auto ;*/
        /*margin-left: auto ;*/
        margin: 0 auto;
        position: relative;

        transform-style: preserve-3d;
    }

    img {
        position: absolute;
    }

    .img1 {
        transform: rotateY(0deg);
    }

    .img2 {
        transform: rotateY(40deg);
    }

    .img3 {
        transform: rotateY(80deg);
    }

    .img4 {
        transform: rotateY(120deg);
    }

    .img5 {
        transform: rotateY(160deg);
    }

    .img6 {
        transform: rotateY(200deg);
    }

    .img7 {
        transform: rotateY(240deg);
    }

    .img8 {
        transform: rotateY(280deg);
    }

    .img9 {
        transform: rotateY(320deg);
    }
</style>

這個時候，鴨子都在圓點，面向了不同的角度，在讓它們向前跨一步，就分散成了一個圓

<style>
    .box {
        border: 1px solid red;
        width: 140px;
        height: 172px;
        /*margin-right: auto ;*/
        /*margin-left: auto ;*/
        margin: 0 auto;
        position: relative;

        transform-style: preserve-3d;
    }

    img {
        position: absolute;
    }

    .img1 {
        transform: rotateY(0deg) translateZ(300px);
    }

    .img2 {
        transform: rotateY(40deg) translateZ(300px);
    }

    .img3 {
        transform: rotateY(80deg) translateZ(300px);
    }

    .img4 {
        transform: rotateY(120deg) translateZ(300px);
    }

    .img5 {
        transform: rotateY(160deg) translateZ(300px);
    }

    .img6 {
        transform: rotateY(200deg) translateZ(300px);
    }

    .img7 {
        transform: rotateY(240deg) translateZ(300px);
    }

    .img8 {
        transform: rotateY(280deg) translateZ(300px);
    }

    .img9 {
        transform: rotateY(320deg) translateZ(300px);
    }
</style>

但其實沒有看到圍城圓的效果，我們把父盒子在x軸旋轉一個角度，就可以體現出來。同時，加一個

margin-top: 150px;

.box {
    border: 1px solid red;
    width: 140px;
    height: 172px;
    /*margin-right: auto ;*/
    /*margin-left: auto ;*/
    margin: 0 auto;
    position: relative;

    transform-style: preserve-3d;
    transform: rotateX(-20deg);
    margin-top: 150px;
}

可以看到，已經形成一個圓了。

新增動畫

/*定義一個動畫*/
@keyframes xuanzhuan {
    0% {
        transform: rotateX(-20deg) rotateY(0deg)
    }
    100% {
        transform: rotateX(-20deg) rotateY(360deg)
    }
}

.box {
    border: 1px solid red;
    width: 140px;
    height: 172px;
    /*margin-right: auto ;*/
    /*margin-left: auto ;*/
    margin: 0 auto;
    position: relative;

    transform-style: preserve-3d;
    transform: rotateX(-20deg);

    margin-top: 150px;

    /*繫結動畫*/
    animation: xuanzhuan 10s;
    /*動畫無限迴圈播放*/
    animation-iteration-count: infinite;
    /*速度線性播放*/
    animation-timing-function: linear;
}

新增背景音樂

<audio src="media/小黃鴨音訊.mp3" autoplay="autoplay" loop="loop"></audio>

chrome瀏覽器不能自動播放問題解決

瀏覽器輸入

chrome://flags/#autoplay-policy

將 Autoplay policy 改為

No user gesture is required

完整程式碼

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        @keyframes xuanzhuan {
            0% {
                transform: rotateX(-20deg) rotateY(0deg)
            }
            100% {
                transform: rotateX(-20deg) rotateY(360deg)
            }
        }

        body {
            background-color: #313131;
        }

        .box {
            width: 154px;
            height: 186px;
            margin: 150px auto;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-20deg);

            animation: xuanzhuan 15s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        .box > div {
            position: absolute;
        }
    </style>

</head>
<body>

<audio src="media/小黃鴨音訊.mp3" loop="loop" autoplay="autoplay"></audio>

<div class="box">
    <div style="transform: rotateY(0deg) translateZ(300px)">
        <img src="img/001.gif" alt="">
    </div>
    <div style="transform: rotateY(40deg) translateZ(300px) ">
        <img src="img/002.gif" alt="">
    </div>
    <div style="transform: rotateY(80deg) translateZ(300px) ">
        <img src="img/003.gif" alt="">
    </div>
    <div style="transform: rotateY(120deg) translateZ(300px) ">
        <img src="img/004.gif" alt="">
    </div>
    <div style="transform: rotateY(160deg) translateZ(300px) ">
        <img src="img/005.gif" alt="">
    </div>
    <div style="transform: rotateY(200deg) translateZ(300px) ">
        <img src="img/006.gif" alt="">
    </div>
    <div style="transform: rotateY(240deg) translateZ(300px) ">
        <img src="img/007.gif" alt="">
    </div>
    <div style="transform: rotateY(280deg) translateZ(300px) ">
        <img src="img/008.gif" alt="">
    </div>
    <div style="transform: rotateY(320deg)  translateZ(300px) ">
        <img src="img/009.gif" alt="">
    </div>
</div>
</body>
</html>