欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-10 14:28:40
这篇文章主要为大家详细介绍了CSS3 3D旋转rotate效果实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下... 16-05-03...

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

效果图:

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>   

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