html中3D旋轉木馬動畫的制作

踩了不少坑，這里都寫出來就當給大家拋磚引玉了。

section {
            position: relative;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            animation: rotate 5s linear infinite;
            background: url("image/dogy1.jpg");
        }

        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("image/dogy.jpg") no-repeat;
        }

        section div:nth-child(1) {
            transform: rotateY(0) translateZ(400px);
        }

        section div:nth-child(2) {
            transform: rotateY(60deg) translateZ(400px);
        }

        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(400px);
        }

        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(400px);
        }

        section div:nth-child(5) {
            transform: rotateY(240deg) translateZ(400px);
        }

        section div:nth-child(6) {
            transform: rotateY(300deg) translateZ(400px);
        }

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

本身算是比較簡單的，成品效果如下：

 

需要注意的有：

1、對於這樣的旋轉圖，可以先進行【旋轉】再進行【位移】，因為元素的參考坐標軸永遠是他自己的中心處——如果不做修改的話。因此將其旋轉后，再做位移就能完美得移動到想要的位置了。

譬如這里，外圈是有6張圖片。一開始我想着是正六邊形，那么第一張正對的圖片就要往z軸移動 √3倍 邊長了……

其余的圖片雖然有對稱能夠根據這個推算出來移動距離，但也很難讓他們看上去是一個【整體】，因此最好先旋轉后位移。

 

2、最好嵌套一個父盒子

<div>子元素早已定好了位置，我們這里是對<section>元素進行旋轉動畫所以看上去是都在動——相對靜止。

如果此時想要對 <section> 盒子本身作定位，抑或是在正常文檔流之下布置其他元素，讓頁面變高，都會使得這個旋轉動畫變得十分鬼畜……（或許因為是沿着y軸旋轉，所以和高度相關吧，如果是x軸水車式的動畫的話，可能就和寬度有關了吧）

譬如預先設置了頁面高度（或者說動畫下方有其他元素撐高）

 

body {
            height: 2000px;
            perspective: 1000px;
        }

這里就是頁面高度太高，以至於旋轉變得很奇怪。如果你還把透視（perspective）設置得過低，那么整個動畫將幾乎覆蓋整個頁面……

 

同時，設置父盒子也便於使整個動畫定位。如果你是給動畫盒子<section>本身設置定位的話，定位將會失效。

總之設置一個父盒子就完事兒了。

.elevator {
            position: fixed;
            top: 100px;
            left: 100px;
            perspective: 300px;
        }

 

如果不需要看到旋轉到后方圖片得背面，那么可以給盒子設置 

section div {
            ……
            backface-visibility: hidden;
        }

這個屬性會使得盒子背面面向屏幕時，隱藏自身。因為大部分時候圖片也好文字也好，旋轉過去后的背面實際上是鏡面反轉了，所以可以考慮隱藏。

 

 

翻轉圖片也是需要設置這個屬性，才能讓前面的這個翻轉過去后消失，留下“之前的背面元素”