在這裡分享一下3d魔方動畫，html5+css3即可完成~無圖無真相，先上效果圖
第一步非常簡單，就是先將魔方的結構畫出來。大家都玩過魔方，知道魔方是乙個有六個面的正方體。這裡我們先寫乙個大的div(類名為box)作為容器，裡面包含魔方6個面，即6個div，然後我這裡每個麵裡還分了9個小div就是9個小格仔。**如下，簡單看看
...第二步，有了魔方的結構，我們開始給魔方上色。我們直接看**，簡單粗暴~
.aside第三步，我們畫了這麼久魔方，你把檔案放到瀏覽器一看，結果發現連個魔方的影都沒有？ 不急。我們首先需要在父容器上新增 transform-style: preserve-3d; 這句**很關鍵.aside div
，讓該元素的子元素看起來變成3d效果，預設是平面效果（2d），(具體請看好，新增了這句**以後，我們要開始移動6個面，使之組合後看起來是個正方體。移動6個面無非就是以下幾句**
/*向x軸正方向平移80px長度、向y軸負方向平移80px、向z軸正方向平移90px*/什麼？你說瀏覽器不相容？自己加相應字首即可，這裡不詳細討論。栗子（-webkit-transform:rotatex(30deg);）transform: translatex(80px) translatey(-80px) translatez(90px);
/*向x軸順時針轉動30度（℃）、向y軸順時針轉動45度、向z軸逆時針轉動90度*/
transform:rotatex(30deg) rotatey(45deg) rotatez(-90deg);
自己開啟瀏覽器f12慢慢除錯自己想要的角度。這裡貼上我自己的**僅供參考~
.box話說哪怕做到這裡，其實還是不能很好的看到魔方全貌。/*魔方動畫效果*/
@keyframes cube_animation
16%33%
50%66%
83%}
/*魔方六面*/
.aside
.bside
.cside
.dside
.eside
好吧，放大招，在父容器中新增perspective:1000px;perspective-origin:25% 75%;
然後慢慢在瀏覽器f12除錯數值看看有什麼變化~ 最後還有個動畫效果，**我已經貼在上面了，具體動畫原理我改天再另寫一篇部落格~ 謝謝你看到這裡。如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知 ending~
css3之3d動畫呈現
利用css3完成3d效果的簡單呈現 動畫效果用呈現不出來，大家自己動手寫乙個看看吧 新建html lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle head c...
純CSS3 實現3D魔方
1 思路 父盒子給子盒子開啟立體空間，並開啟透視，設定視距 子盒子設定擺放位置，與我們畫的正方體類似，按照平面正方體每個面的拜訪位置，我們通過旋轉 平移達到擺放的效果 父盒子設定過渡 滑鼠懸停到父盒子，子盒子做出的行為，分別向各自的方向擴散，並且側面要有一定的旋轉，為90 使其達到我們想看到的開啟效...
CSS3動畫 3D旋轉
學了c3之後，簡單做了乙個3d旋轉的小demo.個人親猜測相容chrome firefox opera safari，沒有考慮ie。如果下面 有問題，可以在我的github檢視源 可以檢視網頁效果demo位址。如下 ccs3animation 3drotatetitle charset utf 8 ...