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

前端技术 2023/09/09 CSS

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

效果图：

示例代码

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>     
  2. <html lang=\"en\">     
  3. <head>     
  4.     <meta charset=\"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: 100px auto;     
  17.             -webkit-transition: background-color 3s;     
  18.         }     
  19.         #block:hover {     
  20.             background-color: purple;     
  21.         }     
  22.         #ep {     
  23.             text-align: center;     
  24.         }     
  25.         #ep input {     
  26.             width: 800px;     
  27.         }     
  28.     </style>     
  29.     <script>     
  30.         function rotate() {     
  31.             var x = document.getElementById(\"rotateX\").value;     
  32.             var y = document.getElementById(\"rotateY\").value;     
  33.             var z = document.getElementById(\"rotateZ\").value;     
  34.             document.getElementById(\"block\").style.webkitTransform = \"rotateX(\" + x + \"deg) rotateY(\" + y + \"deg) rotateZ(\" + z + \"deg)\";     
  35.      
  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.     <div id=\"experiment\">     
  44.         <div id=\"block\"></div>     
  45.     </div>     
  46.     <div id=\"ep\">     
  47.         <p>rotate x: <span id=\"degx-span\">0</span>deg</p>     
  48.         <input type=\"range\" min=\"-360\" max=\"360\" id=\"rotateX\" value=\"0\" class=\"range-control\" onmousemove=\"rotate()\"/><br/>     
  49.         <p>rotate y: <span id=\"degy-span\">0</span>deg</p>     
  50.         <input type=\"range\" min=\"-360\" max=\"360\" id=\"rotateY\" value=\"0\" class=\"range-control\" onmousemove=\"rotate()\"/><br/>     
  51.         <p>rotate z: <span id=\"degz-span\">0</span>deg</p>     
  52.         <input type=\"range\" min=\"-360\" max=\"360\" id=\"rotateZ\" value=\"0\" class=\"range-control\" onmousemove=\"rotate()\"/><br/>     
  53.     </div>     
  54. </body>     
  55. </html>   

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

本文地址：https://www.stayed.cn/item/24170

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案