css動畫的某些屬性可以實現非常炫酷的3d效果，貼出乙個例子，可直接看到效果，用到了css的3d轉換和動畫。
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
/><
meta
name
="viewport"
content
="width=device-width, initial-scale=1"
/>
<
title
>
title
><
base
target
="_blank"
/>
head
>
<
style
type
="text/css"
>
body
/*最外層容器樣式
*/.wrap
/*包裹所有容器樣式
*/.cube
@-webkit-keyframes rotateto}
.cube div
/*定義所有樣式
*/.pic
.out_front
.out_back
.out_left
.out_right
.out_top
.out_bottom
.cube span
.cube .in_pic
.cube .in_front
.cube .in_back
.cube .in_left
.cube .in_right
.cube .in_top
.cube .in_bottom
/*滑鼠移入後樣式
*/.cube:hover .out_front
.cube:hover .out_back
.cube:hover .out_left
.cube:hover .out_right
.cube:hover .out_top
.cube:hover .out_bottom
style
>
<
body
>
<
div
class
="wrap"
>
<
div
class
="cube"
>
<
div
class
="out_front"
>
<
img
src=""
class
="pic"
/>
div>
<
div
class
="out_back"
>
<
img
src=""
class
="pic"
/>
div>
<
div
class
="out_left"
>
<
img
src=""
class
="pic"
/>
div>
<
div
class
="out_right"
>
<
img
src=""
class
="pic"
/>
div>
<
div
class
="out_top"
>
<
img
src=""
class
="pic"
/>
div>
<
div
class
="out_bottom"
>
<
img
src=""
class
="pic"
/>
div>
<
span
class
="in_front"
>
<
img
src=""
class
="in_pic"
/>
span
>
<
span
class
="in_back"
>
<
img
src=""
class
="in_pic"
/>
span
>
<
span
class
="in_left"
>
<
img
src=""
class
="in_pic"
/>
span
>
<
span
class
="in_right"
>
<
img
src=""
class
="in_pic"
/>
span
>
<
span
class
="in_top"
>
<
img
src=""
class
="in_pic"
/>
span
>
<
span
class
="in_bottom"
>
<
img
src=""
class
="in_pic"
/>
span
>
div>
div>
body
>
html
>
純CSS實現3D正方體動畫效果
目錄前言 正文1.基本架構 2.書寫每個div樣式 3.為需要產生動畫的一面單獨設定樣式 4.設定滑鼠hover效果 5.優化 總結 純css實現3d正方體動畫效果，此方法是通過transform的旋轉 rotate 和位移 translate 實現的，具體效果是滑鼠滑過時正方體的乙個面會產生位移 ...
純CSS3 實現3D魔方
1 思路 父盒子給子盒子開啟立體空間，並開啟透視，設定視距 子盒子設定擺放位置，與我們畫的正方體類似，按照平面正方體每個面的拜訪位置，我們通過旋轉 平移達到擺放的效果 父盒子設定過渡 滑鼠懸停到父盒子，子盒子做出的行為，分別向各自的方向擴散，並且側面要有一定的旋轉，為90 使其達到我們想看到的開啟效...
CSS 動畫 3D翻頁動畫
doctype html html lang en head meta charset utf 8 meta name viewport content width device width,initial scale 1.0 title create effect of 3d title styl...