1、思路
父盒子給子盒子開啟立體空間，並開啟透視，設定視距
子盒子設定擺放位置，與我們畫的正方體類似，按照平面正方體每個面的拜訪位置，我們通過旋轉、平移達到擺放的效果
父盒子設定過渡
滑鼠懸停到父盒子，子盒子做出的行為，分別向各自的方向擴散，並且側面要有一定的旋轉，為90°，使其達到我們想看到的開啟效果
建立動畫，0%-100%沒問題，x軸和y軸旋轉一周或者兩周，即360°或者720°
大盒子呼叫動畫，大盒子旋轉，子盒子就跟著轉了
2、原始碼
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
3d魔方title
>
>
/* 清除瀏覽器內外邊距 */
*body
/* 公共樣式開始了 */
/* 設定大盒子的樣式 */
.photo
/* 設定滑鼠移動到img元素後行為的過度事件 */
.photo1 img
/* 公共樣式結束了 */
/* 外層魔方開始了 */
.photo1
.photo1 img
/*設定正方形的6個面的位置
1、前後兩個面的xy軸不動，只改變z軸從自身向外擴散的距離(可視區為+，否則為-)
2、左右兩個面y軸旋轉90deg，呈豎著的狀態，z軸從自身向外擴散(可視區為+，否則為-)
3、上下兩個面x軸旋轉90deg，呈平行的狀態，z軸從自身向外擴散(可視區為+，否則為-)
*/.photo1 #before
.photo1 #after
.photo1 #top
.photo1 #bottom
.photo1 #right
.photo1 #left
/* 滑鼠懸停在大盒子上，則出現的效果
1、分別向自身方向的z軸向外移動
2、自身的帶有的xy軸資料繼續正方向旋轉90deg，使其視覺更有動態效果
*/.photo1:hover #before
.photo1:hover #after
.photo1:hover #top
.photo1:hover #bottom
.photo1:hover #right
.photo1:hover #left
/* 外層魔方結束了了 */
/* 內層魔方開始了 */
.photo2
.photo2 img
.photo2 #before
.photo2 #after
.photo2 #top
.photo2 #bottom
.photo2 #right
.photo2 #left
/* 內層魔方結束了了 */
/* 建立動畫
1、開始的時候在即原點
2、結束時xy軸旋轉。旋轉720deg是為了多旋轉一圈，並且速度能快一點
"./audio/彈鋼琴的楠楠 - 【鋼琴】windy hill（翻自 羽腫）.***"
type
="audio/***"
>
src=
"./audio/彈鋼琴的楠楠 - 【鋼琴】windy hill（翻自 羽腫）.ogg"
type
="audio/ogg"
>
audio
>
body
>
shtml
>
純CSS做3D旋轉魔方
昨天偶然看見 簡單說 用css做乙個魔方旋轉的效果 做的乙個3d旋轉魔方 效果就是本部落格右側公告欄所示 在這裡把做法展現出來 感興趣的可以試試 做成自己特有的魔方 1 doctype html 2 html 34 head 5 meta charset utf 8 6 style 7 最外層容器樣...
css3之3D魔方動畫（小白版）
在這裡分享一下3d魔方動畫，html5 css3即可完成 無圖無真相，先上效果圖 第一步非常簡單，就是先將魔方的結構畫出來。大家都玩過魔方，知道魔方是乙個有六個面的正方體。這裡我們先寫乙個大的div 類名為box 作為容器，裡面包含魔方6個面，即6個div，然後我這裡每個麵裡還分了9個小div就是9...
純css實現3D動畫
css動畫的某些屬性可以實現非常炫酷的3d效果，貼出乙個例子，可直接看到效果，用到了css的3d轉換和動畫。doctype html html head meta charset utf 8 meta name viewport content width device width,initial ...