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

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;
        }

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

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