本文实例为大家分享了CSS3 3D旋转rotate效果实例，供大家参考，具体内容如下
效果图：
示例代码
XML/HTML Code复制内容到剪贴板
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>3D旋转的Demo</title><style>#experiment{-webkit-perspective:800;-webkit-perspective-origin:50%50%;-webkit-transform-style:-webkit-preserve-3d;}#block{width:200px;height:200px;background-color:pink;margin:100pxauto;-webkit-transition:background-color3s;}#block:hover{background-color:purple;}#ep{text-align:center;}#epinput{width:800px;}</style><script>functionrotate(){varx=document.getElementById("rotateX").value;vary=document.getElementById("rotateY").value;varz=document.getElementById("rotateZ").value;document.getElementById("block").style.webkitTransform="rotateX("+x+"deg)rotateY("+y+"deg)rotateZ("+z+"deg)";document.getElementById("degx-span").innerText=x;document.getElementById("degy-span").innerText=y;document.getElementById("degz-span").innerText=z;}</script></head><body><divid="experiment"><divid="block"></div></div><divid="ep"><p>rotatex:<spanid="degx-span">0</span>deg</p><inputtype="range"min="-360"max="360"id="rotateX"value="0"class="range-control"onmousemove="rotate()"/><br/><p>rotatey:<spanid="degy-span">0</span>deg</p><inputtype="range"min="-360"max="360"id="rotateY"value="0"class="range-control"onmousemove="rotate()"/><br/><p>rotatez:<spanid="degz-span">0</span>deg</p><inputtype="range"min="-360"max="360"id="rotateZ"value="0"class="range-control"onmousemove="rotate()"/><br/></div></body></html>以上就是本文的全部内容，希望对大家的学习有所帮助。
