css3之3D魔方動畫（小白版）

 

在這里分享一下3D魔方動畫，html5+CSS3即可完成~無圖無真相，先上效果圖

第一步非常簡單，就是先將魔方的結構畫出來。大家都玩過魔方，知道魔方是一個有六個面的正方體。這里我們先寫一個大的div(類名為box)作為容器，里面包含魔方6個面，即6個div，然后我這里每個面里還分了9個小div就是9個小格子。代碼如下，簡單看看

        <!-- 魔方六面 -->
        <div class="box">
            <div class="aside"> <!--魔方第一個面，類名aside-->
                <div></div>　　<!--第一個面里的每一個小格子-->
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            ...<!--魔方另外五個面代碼和第一個面一樣，此處省略-->
        </div>

 第二步，有了魔方的結構，我們開始給魔方上色。我們直接看代碼，簡單粗暴~

.aside{
    width: 180px;　　　　　　
    height: 180px;　　　　　　/* 這里定義每個面長寬都是180px */
    position: absolute;　　  /* 設置絕對定位，方便后面控制每個面的位置*/
    transform: translatez(0px);　　/*對這個面進行位置的移動*/
}
.aside div{
    width: 54px;　　　
    height: 54px;　　　　
    border-radius: 4px;　　/*設置圓角才能看到格子與格子間的小孔*/
    float: left;　　
    border: 3px solid #000;　　/* 這里定義每個格子的邊框是3px 所以一個格子總的長寬是54+3+3=60px 一行3個格子60*3=180px 一列同理 */
    background: green;　　/*上色*/
}

第三步，我們畫了這么久魔方，你把文件放到瀏覽器一看，結果發現連個魔方的影都沒有？ 不急。我們首先需要在父容器上添加 transform-style: preserve-3d; 這句代碼很關鍵，讓該元素的子元素看起來變成3D效果，默認是平面效果（2D），(具體請看https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-style)

 好，添加了這句代碼以后，我們要開始移動6個面，使之組合后看起來是個正方體。移動6個面無非就是以下幾句代碼

/*向X軸正方向平移80px長度、向Y軸負方向平移80PX、向Z軸正方向平移90px*/
transform: translatex(80px)  translatey(-80px) translatez(90px);
/*向X軸順時針轉動30度（℃）、向Y軸順時針轉動45度、向Z軸逆時針轉動90度*/
transform:rotatex(30deg) rotatey(45deg) rotatez(-90deg);

 

什么？你說瀏覽器不兼容？自己加相應前綴即可，這里不詳細討論。栗子（-webkit-transform:rotatex(30deg);）

自己打開瀏覽器F12慢慢調試自己想要的角度。這里貼上我自己的代碼僅供參考~

.box{
    animation: cube_animation ease-in-out 6s infinite forwards;  /*魔方動畫設置*/
    transform-style: preserve-3d;　　/*3d渲染*/
    transform-origin: 90px 90px 90px;
}
/*魔方動畫效果*/
@keyframes cube_animation{
    from,to{}
    16%{
        transform: rotatey(-90deg);
    }
    33%{
        transform: rotatey(-90deg) rotatez(135deg);
    }
    50%{
        transform: rotatey(225deg) rotatez(135deg);
    }
    66%{
        transform: rotatey(135deg) rotatex(135deg);
    }
    83%{
        transform: rotatex(135deg);
    }
}
/*魔方六面*/
.aside{
    width: 180px;
    height: 180px;
    position: absolute;

}

.bside{
    width: 180px;
    height: 180px;
    position: absolute;
　　/*魔方的B面，先向左平移90px,再靠近人臉90px,最后y軸順時針90度*/
    transform: translatex(-90px) translatez(90px) rotatey(90deg);
}

.cside{
    width: 180px;
    height: 180px;
    position: absolute;

    transform: translatez(90px) translatey(90px) rotatex(90deg);
}

.dside{
    width: 180px;
    height: 180px;
    position: absolute;
    transform: translatez(180px);
}

.eside{
    width: 180px;
    height: 180px;
    position: absolute;
    transform: translatez(90px) translatey(-90px) rotatex(90deg);
}

 話說哪怕做到這里，其實還是不能很好的看到魔方全貌。

好吧，放大招，在父容器中添加perspective:1000px;perspective-origin:25% 75%;

然后慢慢在瀏覽器F12調試數值看看有什么變化~ 最后還有個動畫效果，代碼我已經貼在上面了，具體動畫原理我改天再另寫一篇博客~ 謝謝你看到這里。如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知 ending~