昨天偶然看見網友（簡單說 用css做乙個魔方旋轉的效果
）做的乙個3d旋轉魔方 效果就是本部落格右側公告欄所示
在這裡把做法展現出來
感興趣的可以試試 做成自己特有的魔方
1下面是效果圖doctype html
>
2<
html
>34
<
head
>
5<
meta
charset
="utf-8"
/>
6<
style
>7/*
最外層容器樣式*/8
.wrap
1415
/*包裹所有容器樣式
*/16
.cube
2425
@-webkit-keyframes rotate
29to 32}
3334
.cube div
4142
/*定義所有樣式
*/43
.pic
4748
.cube .out_front
5152
.cube .out_back
5556
.cube .out_left
5960
.cube .out_right
6364
.cube .out_top
6768
.cube .out_bottom
7172
/*定義小正方體樣式
*/73
.cube span
8182
.cube .in_pic
8687
.cube .in_front
9091
.cube .in_back
9495
.cube .in_left
9899
.cube .in_right
102103
.cube .in_top
106107
.cube .in_bottom
110111
/*滑鼠移入後樣式
*/112
.cube:hover .out_front
115116
.cube:hover .out_back
119120
.cube:hover .out_left
123124
.cube:hover .out_right
127128
.cube:hover .out_top
131132
.cube:hover .out_bottom
135style
>
136head
>
137138
<
body
>
139140
<
div
class
="wrap"
>
141142
<
div
class
="cube"
>
143144
<
div
class
="out_front"
>
145<
img
src=""
class
="pic"
/>
146div
>
147148
<
div
class
="out_back"
>
149<
img
src=""
class
="pic"
/>
150div
>
151152
<
div
class
="out_left"
>
153<
img
src=""
class
="pic"
/>
154div
>
155156
<
div
class
="out_right"
>
157<
img
src=""
class
="pic"
/>
158div
>
159160
<
div
class
="out_top"
>
161<
img
src=""
class
="pic"
/>
162div
>
163164
<
div
class
="out_bottom"
>
165<
img
src=""
class
="pic"
/>
166div
>
167168
169<
span
class
="in_front"
>
170<
img
src=""
class
="in_pic"
/>
171span
>
172<
span
class
="in_back"
>
173<
img
src=""
class
="in_pic"
/>
174span
>
175<
span
class
="in_left"
>
176<
img
src=""
class
="in_pic"
/>
177span
>
178<
span
class
="in_right"
>
179<
img
src=""
class
="in_pic"
/>
180span
>
181<
span
class
="in_top"
>
182<
img
src=""
class
="in_pic"
/>
183span
>
184<
span
class
="in_bottom"
>
185<
img
src=""
class
="in_pic"
/>
186span
>
187div
>
188189
div>
190body
>
191192
html
>
其中難點：
transform-style: preserve-3d;
使被轉換的子元素保留其 3d 轉換：
參考鏈結
css動畫
摘自：
2017-11-30 08:26:45
CSS做3D旋轉魔方（立方體）
css做3d旋轉魔方，使用的是3d位移與旋轉屬性，以及動畫屬性。不多，以下便是全部 立方體title keyframes run 40 70 100 box box div 分別給每個面新增乙個背景圖，並將前後上下左右六個面通過位移與旋轉，放置到對應的位置。f.b.t d.l rstyle head...
純CSS3 實現3D魔方
1 思路 父盒子給子盒子開啟立體空間，並開啟透視，設定視距 子盒子設定擺放位置，與我們畫的正方體類似，按照平面正方體每個面的拜訪位置，我們通過旋轉 平移達到擺放的效果 父盒子設定過渡 滑鼠懸停到父盒子，子盒子做出的行為，分別向各自的方向擴散，並且側面要有一定的旋轉，為90 使其達到我們想看到的開啟效...
用CSS實現3D魔方動畫旋轉
這裡呢主要是用我們的div標籤來對魔方的各個面及各個塊進行實現，先上乙個主體的html 吧 我們可以看到有乙個id box的div，這就是我們一整個魔方的的樣子的啦，那麼我們就現在裡面設定一下css樣式吧 box在這裡我們設定了box的一些基本屬性，其中最重要的兩句話就是 webkit transf...