CSS3 3D旋转rotate效果实例介绍

网络
回到家里，妈妈满脸期待的说： "照片呢？ "我说： "包里。 "妈妈打开包，拿出照相机，说： "夕阳这么美啊！看来下次我也要去。 "我说： "也行，只要您不怕冷。 "看到妈妈脸气的那么红，我和爸爸都笑了。

本文实例为大家分享了CSS3 3D旋转rotate效果实例，供大家参考，具体内容如下

效果图：

示例代码

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>3D旋转的Demo</title>
  6. <style>
  7. #experiment{
  8. -webkit-perspective:800;
  9. -webkit-perspective-origin:50%50%;
  10. -webkit-transform-style:-webkit-preserve-3d;
  11. }
  12. #block{
  13. width:200px;
  14. height:200px;
  15. background-color:pink;
  16. margin:100pxauto;
  17. -webkit-transition:background-color3s;
  18. }
  19. #block:hover{
  20. background-color:purple;
  21. }
  22. #ep{
  23. text-align:center;
  24. }
  25. #epinput{
  26. width:800px;
  27. }
  28. </style>
  29. <script>
  30. functionrotate(){
  31. varx=document.getElementById("rotateX").value;
  32. vary=document.getElementById("rotateY").value;
  33. varz=document.getElementById("rotateZ").value;
  34. document.getElementById("block").style.webkitTransform="rotateX("+x+"deg)rotateY("+y+"deg)rotateZ("+z+"deg)";
  36. document.getElementById("degx-span").innerText=x;
  37. document.getElementById("degy-span").innerText=y;
  38. document.getElementById("degz-span").innerText=z;
  39. }
  40. </script>
  41. </head>
  42. <body>
  43. <divid="experiment">
  44. <divid="block"></div>
  45. </div>
  46. <divid="ep">
  47. <p>rotatex:<spanid="degx-span">0</span>deg</p>
  48. <inputtype="range"min="-360"max="360"id="rotateX"value="0"class="range-control"onmousemove="rotate()"/><br/>
  49. <p>rotatey:<spanid="degy-span">0</span>deg</p>
  50. <inputtype="range"min="-360"max="360"id="rotateY"value="0"class="range-control"onmousemove="rotate()"/><br/>
  51. <p>rotatez:<spanid="degz-span">0</span>deg</p>
  52. <inputtype="range"min="-360"max="360"id="rotateZ"value="0"class="range-control"onmousemove="rotate()"/><br/>
  53. </div>
  54. </body>
  55. </html>

以上就是本文的全部内容，希望对大家的学习有所帮助。