css3-实现3D立方体旋转

核心内容：

1.CSS3 中 animation、perspective 属性的熟练运用。
2.CSS3 中的变形属性 transform，在 3D 立体效果中的运用。
3.3D 立方体旋转实现原理。

实例：

创建大小两个盒子，小盒子放在大盒子里面，通过3D立体定位调整各自的位置，呈现一个立方体的现状；然后定义鼠标移入后的动画帧事件。实现如下效果图一样的模型。

HTML：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>css3-3d旋转</title>
 5     <meta charset = "utf-8">
 6     <link rel="stylesheet" type="text/css" href="css3-3d-scale.css">
 7 </head>
 8 <body>
 9 <div class="wrap">
10     <div class="cube">
11         <div class="out-front">前</div>
12         <div class="out-back">后</div>
13         <div class="out-left">左</div>
14         <div class="out-right">右</div>
15         <div class="out-top">上</div>
16         <div class="out-bottom">下</div>
17 
18         <span class="in-front">1</span>
19         <span class="in-back">2</span>
20         <span class="in-left">3</span>
21         <span class="in-right">4</span>
22         <span class="in-top">5</span>
23         <span class="in-bottom">6</span>
24     </div>
25 </div>
26 </body>
27 </html>

View Code