温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS3 中怎么实现3D旋转rotate效果

发布时间:2021-08-11 11:32:59 来源:亿速云 阅读:200 作者:Leah 栏目:web开发

本篇文章为大家展示了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>   

上述内容就是CSS3 中怎么实现3D旋转rotate效果,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI