用CSS實現3D魔方動畫旋轉

一、3D魔方的實現

這裏呢主要是用我們的div標籤來對魔方的各個面及各個塊進行實現，先上一個主體的html代碼吧

<div id="box">
            <!-- 各個面 -->
            <div class="one">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="two">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="three">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="four">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="five">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="six">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>

我們可以看到有一個id=box的div，這就是我們一整個魔方的的樣子的啦，那麼我們就現在裏面設置一下CSS樣式吧

#box {
    position: relative;
    font-size: 90px;
    width: 180px;height:180px;
    margin: 120px auto;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

在這裏我們設置了box的一些基本屬性，其中最重要的兩句話就是

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

這兩句話是使整個box具有3D視角的基礎（兩句話分別對webkit內核瀏覽器和W3C標準的瀏覽器進行了兼容）
做了一個大的設置後，我們開始對魔方的每個面進行設置，首先我們把他們共有的一些屬性都抽出來

#box div {
    position: absolute;
    width: 180px;
    height: 180px;
    background: rgba(0, 0, 0, .1);
}

敲黑板！！這裏最好把position設置爲absolute，不然對之後的一些改變會很麻煩

這個時候我們看到的東西應該就是漆黑一片的一個正方體，因爲這個時候是6個面疊在一起

那麼接下來就開始讓每個面進行一個3D變化，但在這之前，我們需要先了解一個CSS3新增的屬性transform，在這裏就簡單講幾個跟我們3D魔方相關的幾個東西，詳情CSS手冊transform屬性

transform：translateX(90px);

這句話的意思是往x軸的正方向（即電腦屏幕向右）平移90px，同理，將X換做Y（正方向爲電腦屏幕向上）或Z（正方向爲電腦屏幕指向自己的方向）也會有相應的效果。

transform: rotateX(-90deg)

這裏是指沿着x軸旋轉-90度，如果沒有特別指定transform-origin（設置或檢索對象以某個原點進行轉換），則默認爲以中心點進行旋轉，同理，將X換做Y或Z也會有相應的效果
大概瞭解了這些，我們便可以開始讓我們6個面進行立體變化了，首先我們先想好一個東西，就是這個魔方的中心點，在這裏我們將魔方的中心設置在我們現在看到的正方形的中心（默認的transform-origin），那麼第一個面

.one {
    -webkit-transform: translateZ(90px);
    transform: translateZ(90px);
}

我們先讓它往z軸移動90px，那麼久會離我們視線變近

第二個面就開始不一樣了

.two {
    -webkit-transform: rotateX(90deg) translateZ(90px);
    transform: rotateX(90deg) translateZ(90px);
}

我們來解析一下這一小段代碼，首先這個面是往Z軸方向移動了90px和第一個面重合，然後繞着x軸旋轉，就像體操運動員一樣向上翻轉，翻轉根據的x軸就是默認的transform-origin

淺藍色的面爲第一個面，深藍色的面爲第二個面，以紅色的點爲中心點進行旋轉變化，同樣的，其他幾個面也可以先進行Z軸移動，再進行旋轉得到（代碼不詳細寫出，效果圖如下）

6個面完成後，就要開始對每個面裏面的小方塊進行設置了

#box .one div {
    width: 60px;
    height: 60px;
    float: left;
    position: relative;
    display: inline-block;
    border: none;
    background: rgba(255, 0, 0, 0.8);
    border-radius: 20%;
}

這裏將一整個面的所有方塊都進行了設置，最主要是前面的5句，因爲父元素設置了position:absolute，因此需要將其轉化爲relative，將每個小塊都轉化成行內塊級元素，並進行浮動，使它們能夠對齊排列，而剩下的代碼就是對每個面的方塊的個性化設置，大家可以自己設置顏色邊距等（注意width和height大小，如果加了border就要將div的width和height調小，以免超出範圍）

最終的效果如下

有人可能會問，爲什麼筆者的可以看到3D效果，但自己的卻不行，那你可以試一下在#box中加入這句

-webkit-transform: rotateX(30deg) rotateY(44deg);

然後用瀏覽器的調試模式，改一下數值就好，這裏就是將整個魔方進行翻轉的屬性。

二、動態效果的實現

如果要實現動態效果，那麼#box中的一些東西，就要增加了，接下來給大家看看#box裏面的完整代碼

#box {
    position: relative;
    font-size: 90px;
    width: 180px;
    height: 180px;
    margin: 120px auto;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation: animations 5s 0s infinite ease-in-out normal none;
    animation: animations 5s 0s infinite ease-in-out normal none;
}

首先一定要設置寬高，這樣transform-origin纔可以在center的位置，如果不設置的話，也可以，把transform-origin改爲如下，但位置效果會有些奇怪，需要另外調整

-webkit-transform-origin: 90px 90px 0;
    transform-origin: 90px 90px 0;

動畫最關鍵的一個就是animation，具體相關的東西參考CSS參考手冊animation
我們需要另外再設置一個東西就是，要做什麼動畫

@-webkit-keyframes animations {
    0% {
        -webkit-transform: rotateX(0deg) rotateY(0deg);
    }
    25% {
        -webkit-transform: rotateX(-24deg) rotateY(40deg);
    }
    50% {
        -webkit-transform: rotateX(-142deg) rotateY(112deg);
    }
    75% {
        -webkit-transform: rotateX(-226deg) rotateY(200deg);
    }
    100% {
        -webkit-transform: rotateX(-360deg) rotateY(360deg);
    }
}
keyframes animations {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    25% {
        transform: rotateX(-24deg) rotateY(40deg);
    }
    50% {
        transform: rotateX(-142deg) rotateY(112deg);
    }
    75% {
        transform: rotateX(-226deg) rotateY(200deg);
    }
    100% {
        transform: rotateX(-360deg) rotateY(360deg);
    }
}

這樣和#box結合起來，就是魔方在2s內圍繞着中心點進行旋轉，從而我們可以看到不同的面，當然，裏面的數值，大家可以進行更改，從而實現不一樣的動畫效果