前提知识：
1.Transition（过渡）（W3C文档http://www.w3.org/TR/css3-transitions/）
属性：
- transition-property 要应用过渡的css属性
- transition-duration 过渡发生的时长
- transition-timing-function 过渡过程速度变化的设置
可设置值:
linear(匀速）ease（缓慢开始，缓慢结束。默认） ease-in（缓慢开始） ease-out（缓慢结束） ease-in-out（缓慢开始，缓慢结束，但与ease速度不同）
- transition-delay 过渡何时开始
- transition 以上属性简写
使用：
不同浏览器需要在属性前加前缀：chrome、Safari 需要加 -webkit-，Firefox前缀-moz-，IE前缀-ms-，Opera前缀-o-
<!DOCTYPE html> <html> <head> <title></title> <style> #block{ width:400px; height:400px; background-color: #69c; margin:0 auto; -webkit-transition: background-color 3s; } #block:hover{ background-color: red;; } </style> </head> <body> <div id="block"> </div> </body> </html>
2.Transform（转换）（W3C文档http://www.w3.org/TR/css3-3d-transforms/）
属性：
perspective：建立3D场景，实现透视效果，值为物品与屏幕距离
perspective-origin：子元素在视图中的位置，X和Y值表示（注意：perspective和perspective-origin都要在实现3D效果元素的父元素中设置）
transform-style：规定如何在 3D 空间中呈现被嵌套的元素（可设置为flat或preserve-3d）
transform-origin：旋转中心
X轴可设置为：left | center | right
Y轴可设置为：top | center | bottom
Z轴设置在Z轴上的位置：length px
本例中用到的方法有translateX（px），translateY，translateZ，表示在XYZ轴上移动和rotateX（deg），rotateY，rotateZ绕XYZ轴旋转。
一个类似日历的实现：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #experiment{ -webkit-perspective:800; -webkit-perspective-origin:50% 50%; overflow: hidden; /*不能写在#pagegroup，否则page显示为2D效果*/ } #pagegroup{ width: 400px; height: 400px; margin: 0 auto; -webkit-transform-style:preserve-3d; position: relative; } .page{ width: 360px; height: 360px; padding: 20px; background-color: black; color: white; font-weight: bold; font-size: 360px; line-height: 360px; text-align: center; position: absolute; } #page1,#page2,#page3,#page4,#page5{ -webkit-transform-origin:top; -webkit-transition:-webkit-transform 1s linear; } #op{ text-align: center; margin: 40px auto; } </style> <script type="text/javascript"> var curIndex = 1;//当前页 function next(){ if (curIndex==5) return; var curPage = document.getElementById("page"+curIndex); curPage.style.webkitTransform="rotateX(90deg)"; curIndex++; var nextPage = document.getElementById("page"+curIndex); nextPage.style.webkitTransform="rotateX(0deg)";//值表示旋转到什么位置，而不是旋转多少度 } function prev(){ if (curIndex==1) return; curIndex--; var prevPage = document.getElementById("page"+curIndex); prevPage.style.webkitTransform="rotateX(0deg)"; } </script> </head> <body> <div id="experiment"> <div id="pagegroup"> <div class="page" id="page5">5</div> <div class="page" id="page4">4</div> <div class="page" id="page3">3</div> <div class="page" id="page2">2</div> <div class="page" id="page1">1</div> </div> </div> <div id="op"> <a href="javascript:next()">next</a>  <a href="javascript:prev()">previous</a> </div> </body> </html>
完成上一个例子后，类似的可以完成一个可调节旋转角度的正方体。正方体的样式通过设置transform-origin和rotate的值实现。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>myCube</title> 5 <style type="text/css"> 6 7 #myCube{ 8 -webkit-perspective:800; 9 -webkit-perspective-origin:50% 50%; 10 } 11 #cube{ 12 width: 200px; 13 height: 200px; 14 margin: 100px auto; 15 position: relative; 16 17 -webkit-transform-style:preserve-3d; 18 } 19 .face{ 20 position: absolute; 21 width: 160px; 22 height: 160px; 23 padding: 20px; 24 background-color: black; 25 26 color: white; 27 font-weight: bold; 28 font-size: 160px; 29 line-height: 160px; 30 text-align: center; 31 32 -webkit-transition:-webkit-transform 1s linear; 33 } 34 #face1{ 35 } 36 #face2{ 37 -webkit-transform-origin:right; 38 -webkit-transform:rotateY(-90deg); 39 } 40 #face3{ 41 -webkit-transform-origin:left; 42 -webkit-transform:rotateY(90deg); 43 } 44 #face4{ 45 -webkit-transform-origin:top; 46 -webkit-transform:rotateX(-90deg); 47 } 48 #face5{ 49 -webkit-transform-origin:bottom; 50 -webkit-transform:rotateX(90deg); 51 } 52 #face6{ 53 -webkit-transform:translateZ(-160px); 54 } 55 #op{ 56 margin: 0 auto; 57 width: 800px; 58 font-weight: bold; 59 font-size: 16px; 60 } 61 #op .range-control{width: 720px;} 62 </style> 63 <script type="text/javascript"> 64 function rotate(){ 65 var x = document.getElementById("rotatex").value; 66 var y = document.getElementById("rotatey").value; 67 var z = document.getElementById("rotatez").value; 68 69 document.getElementById("cube").style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)"; 70 document.getElementById("degx").innerText = x; 71 document.getElementById("degy").innerText = y; 72 document.getElementById("degz").innerText = z; 73 } 74 </script> 75 </head> 76 <body> 77 <div id="myCube"> 78 <div id="cube"> 79 <div class="face" id="face1">1</div> 80 <div class="face" id="face2">2</div> 81 <div class="face" id="face3">3</div> 82 <div class="face" id="face4">4</div> 83 <div class="face" id="face5">5</div> 84 <div class="face" id="face6">6</div> 85 </div> 86 </div> 87 <div id="op"> 88 <p>rotateX:<span id="degx">0</span>deg</p> 89 <input type="range" id="rotatex" min=-360 max=360 value="0" class="range-control" onchange="rotate()" /></br> 90 <p>rotateY:<span id="degy">0</span>deg</p> 91 <input type="range" id="rotatey" min=-360 max=360 value="0" class="range-control" onchange="rotate()" /></br> 92 <p>rotateZ:<span id="degz">0</span>deg</p> 93 <input type="range" id="rotatez" min=-360 max=360 value="0" class="range-control" onchange="rotate()" /></br> 94 </div> 95 </body> 96 </html>