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

.box{
    animation: cube_animation ease-in-out 6s infinite forwards;  
    transform-style: preserve-3d;
    transform-origin: 90px 90px 90px;
}
.bside{
    width: 180px;
    height: 180px;
    position: absolute;
    transform: translatex(-90px) translatez(90px) rotatey(90deg);
}
.cside{
    width: 180px;
    height: 180px;
    position: absolute;
    transform: translatez(90px) translatey(90px) rotatex(90deg);
}
.eside{
    width: 180px;
    height: 180px;
    position: absolute;
    transform: translatez(90px) translatey(-90px) rotatex(90deg);
}

 

在這裡分享一下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>

 第二步，有了魔術方塊的結構，我們開始為魔術方塊上色。我們直接看程式碼，簡單粗~

<span style="color: #000000;">.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;　　<span style="color: #000000;">/* 这里定义每个格子的边框是3px 所以一个格子总的长宽是54+3+3=60px 一行3个格子60*3=180px 一列同理 */</span>
    background: green;　　/*上色*/
}</span>

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

 好，加入了這句程式碼以後，我們要開始移動6個面，使之組合後看起來是個立方體。移動6個面無非就是以下幾句程式碼

<span style="color: #000000;">/*向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);</span>

 

什麼？你說瀏覽器不相容？自己加對應前綴即可，這裡不詳細討論。栗子（-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;
}
/*魔方动画效果*/<br />@keyframes cube_animation{<br />    from,to{}<br />    16%{<br />        transform: rotatey(-90deg);<br />    }<br />    33%{<br />        transform: rotatey(-90deg) rotatez(135deg);<br />    }<br />    50%{<br />        transform: rotatey(225deg) rotatez(135deg);<br />    }<br />    66%{<br />        transform: rotatey(135deg) rotatex(135deg);<br />    }<br />    83%{<br />        transform: rotatex(135deg);<br />    }<br />}
/*魔方六面*/
.aside{
    width: 180px;
    height: 180px;
    position: absolute;

}

.bside{
    width: 180px;
    height: 180px;
    position: absolute;<br />　　/*魔方的B面，先向左平移90px,再靠近人脸90px,最后y轴顺时针90度*/
    transform: translatex(-90px) translatez(90px) rotatey(90deg);
}

.cside{
    width: 180px;
    height: 180px;
    position: absolute;<br />
    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~