当前位置：Gxlcms > css > CSS3让登陆面板3D旋转起来实例代码

CSS3让登陆面板3D旋转起来实例代码

时间：2021-07-01 10:21:17 帮助过：28人阅读

点击登陆面板会发生360度旋转，并显示信息，真正使用CSS3让登陆面板3D旋转起来，如何实现登陆面板3D旋转，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了利用CSS3实现登陆面板3D旋转起来的具体代码，供大家参考，具体内容如下

效果图：

CSS3让登陆面板3D旋转起来实例代码

点击登陆，登陆面板会发生360度旋转，并显示信息。

CSS3让登陆面板3D旋转起来实例代码

旋转结束：

CSS3让登陆面板3D旋转起来实例代码

示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>登陆面板旋转</title>
  6.     <style>
  7.         body {     
  8.             font-family: "Microsoft YaHei", "微软雅黑";     
  9.         }     
  10.         .container {     
  11.             /*创建3D场景*/     
  12.             -webkit-perspective: 800;     
  13.             -webkit-perspective-origin: 50% 50%;     
  14.             -webkit-transform-style: -webkit-preserve-3d; /*告诉浏览器以下transform操作是在3D场景下进行的*/     
  15.         }     
  16.         #login-panel {     
  17.             /*-webkit-transform: rotateX(45deg);*/     
  18.         }     
  19.         .login {     
  20.             width: 500px;     
  21.             height: 400px;     
  22.             margin: 100px auto;     
  23.             text-align: center;     
  24.             border: 1px solid #ABCDEF;     
  25.             border-radius: 10px;     
  26.             box-shadow: 0 0 3px 3px #ABCDEF;     
  27.         }     
  28.         .login h1 {     
  29.             margin: 50px 0;     
  30.         }     
  31.         .login-row span {     
  32.             font-size: 18px;     
  33.         }     
  34.         .login-row input {     
  35.             height: 25px;     
  36.             line-height: 25px;     
  37.             padding: 0 10px;     
  38.             margin: 10px 0;     
  39.         }     
  40.         .btn {     
  41.             outline: none;     
  42.             background-color: aliceblue;     
  43.             cursor: pointer;     
  44.             width: 90px;     
  45.             height: 40px;     
  46.             border: 1px solid #DDD;     
  47.             border-radius: 5px;     
  48.             margin: 30px 20px;     
  49.             font-size: 16px;     
  50.             transition: background-color 0.5s;     
  51.             -webkit-transition: background-color 0.5s;     
  52.             -moz-transition: background-color 0.5s;     
  53.             -o-transition: background-color 0.5s;     
  54.         }     
  55.         .btn:hover {     
  56.             background-color: antiquewhite;     
  57.         }     
  58.         .login-success {     
  59.             font-size: 20px;     
  60.             padding: 50px;     
  61.         }     
  62.     </style>
  63.     <script>
  64.         var loginBtn, regiBtn;     
  65.         window.onload = function() {     
  66.             loginBtn = document.getElementById("login");     
  67.             loginBtn.onclick = rotate;     
  68.             regiBtn = document.getElementById("regi");     
  69.             regiBtn.onclick = rotate;     
  70.         };     
  71.         function rotate() {     
  72.             var x = 0;     
  73.             var panel = document.getElementById("login-panel");     
  74.             panel.style.transform = "rotateX(0deg)";     
  75.             panel.style.webkitTransform = "rotateX(0deg)";     
  76.             var flag = true;     
  77.             var timer = setInterval(function() {     
  78.                 if(Math.round(x) >= 90 && flag) {     
  79.                     panel.innerHTML = "<p class='login-success'>登陆成功</p>";     
  80.                     flag = false;     
  81.                 }     
  82.                 if(Math.round(x) >= 358) {     
  83.                     panel.style.transform = "rotateX(360deg)";     
  84.                     panel.style.webkitTransform = "rotateX(360deg)";     
  85.                     clearInterval(timer);     
  86.                     return false;     
  87.                 } else {     
  88.                     x += 2 + (360 - x) / 60;     
  89.                     panel.style.transform = "rotateX(" + x + "deg)";     
  90.                     panel.style.webkitTransform = "rotateX(" + x + "deg)";     
  91.                 }     
  92.             }, 25);     
  93.         }     
  94.     </script>
  95. </head>
  96. <body>
  97.     <p class="container">
  98.         <p class="login" id="login-panel">
  99.             <h1>登陆</h1>
  100.             <p class="login-row">
  101.                 <label for="username"><span>账号：</span></label>
  102.                 <input type="text" id="username" name="username">
  103.             </p>
  104.             <p class="login-row">
  105.                 <label for="password"><span>密码：</span></label>
  106.                 <input type="password" id="password" name="password">
  107.             </p>
  108.             <p class="login-row">
  109.                 <button id="login" class="btn" type="button">登陆</button>
  110.                 <button id="regi" class="btn" type="button">注册</button>
  111.             </p>
  112.         </p>
  113.     </p>
  114. </body>
  115. </html>

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

以上就是CSS3让登陆面板3D旋转起来实例代码的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！