核心内容：
- 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>
CSS：
1 html { 2 background:linear-gradient(#fe4 0%, #040 80%); 3 height:100%; 4 } 5 @keyframes rotate { 6 0%{ 7 transform:rotateX(0deg) rotateY(0deg); 8 } 9 100%{ 10 transform:rotateX(360deg) rotateY(360deg); 11 } 12 } 13 .wrap { 14 margin-top:180px; 15 perspective:1000px; 16 } 17 .cube { 18 margin:auto; 19 width:200px; 20 height:200px; 21 position:relative; 22 transform-style:preserve-3d; 23 // transform:rotateX(-50deg) rotateY(-30deg); 24 animation:rotate 20s infinite linear; 25 } 26 .cube>div { 27 width:100%; 28 height:100%; 29 position:absolute; 30 background-color:#84d; 31 opcity:.1; 32 border:1px #8ed solid; 33 color:#fff; 34 font-size:36px; 35 font-weight:bold; 36 font-family:"Microsoft Yahei"; 37 text-align:center; 38 line-height:200px; 39 } 40 .cube .out-front { 41 transform:translateZ(100px); 42 } 43 .cube .out-back { 44 transform:translateZ(-100px); 45 } 46 .cube .out-left { 47 transform:rotateY(90deg) translateZ(-100px); 48 } 49 .cube .out-right { 50 transform:rotateY(90deg) translateZ(100px); 51 } 52 .cube .out-top { 53 transform:rotateX(90deg) translateZ(100px); 54 } 55 .cube .out-bottom { 56 transform:rotateX(90deg) translateZ(-100px); 57 } 58 .cube:hover .out-front { 59 transform:translateZ(200px); 60 } 61 .cube:hover .out-back { 62 transform:translateZ(-200px); 63 } 64 .cube:hover .out-left { 65 transform:rotateY(90deg) translateZ(-200px); 66 } 67 .cube:hover .out-right { 68 transform:rotateY(90deg) translateZ(200px); 69 } 70 .cube:hover .out-top { 71 transform:rotateX(90deg) translateZ(200px); 72 } 73 .cube:hover .out-bottom { 74 transform:rotateX(90deg) translateZ(-200px); 75 } 76 .cube>span { 77 display:block; 78 width:100px; 79 height:100px; 80 border:1px #4f0 solid; 81 background-color:#4fe; 82 position:absolute; 83 top:50px; 84 left:50px; 85 opcity:.9; 86 color:#fff; 87 font-size:16px; 88 font-weight:bold; 89 font-family:"Microsoft Yahei"; 90 text-align:center; 91 line-height:100px; 92 } 93 .cube .in-front { 94 transform:translateZ(50px); 95 } 96 .cube .in-back { 97 transform:translateZ(-50px); 98 } 99 .cube .in-left { 100 transform:rotateY(90deg) translateZ(-50px); 101 } 102 .cube .in-right { 103 transform:rotateY(90deg) translateZ(50px); 104 } 105 .cube .in-top { 106 transform:rotateX(90deg) translateZ(50px); 107 } 108 .cube .in-bottom { 109 transform:rotateX(90deg) translateZ(-50px); 110 }
实例效果图：
点击查看在线演示-demo
源代码下载：github/Qboooogle
