溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么用CSS3實現(xiàn)登陸面板3D旋轉(zhuǎn)效果

發(fā)布時間：2021-08-12 16:22:58 來源：億速云 閱讀：136 作者：chen 欄目：web開發(fā)

這篇文章主要講解了“怎么用CSS3實現(xiàn)登陸面板3D旋轉(zhuǎn)效果”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用CSS3實現(xiàn)登陸面板3D旋轉(zhuǎn)效果”吧！

本文實例為大家分享了利用CSS3實現(xiàn)登陸面板3D旋轉(zhuǎn)起來的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

怎么用CSS3實現(xiàn)登陸面板3D旋轉(zhuǎn)效果

點(diǎn)擊登陸，登陸面板會發(fā)生360度旋轉(zhuǎn)，并顯示信息。

怎么用CSS3實現(xiàn)登陸面板3D旋轉(zhuǎn)效果

旋轉(zhuǎn)結(jié)束：

怎么用CSS3實現(xiàn)登陸面板3D旋轉(zhuǎn)效果

示例代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html>     

  2. <html lang="en">     

  3. <head>     

  4.     <meta charset="UTF-8">     

  5.     <title>登陸面板旋轉(zhuǎn)</title>     

  6.     <style>     

  7.         body {     

  8.             font-family: "Microsoft YaHei", "微軟雅黑";     

  9.         }     

  10.      

  11.         .container {     

  12.             /*創(chuàng)建3D場景*/     

  13.             -webkit-perspective: 800;     

  14.             -webkit-perspective-origin: 50% 50%;     

  15.             -webkit-transform-style: -webkit-preserve-3d; /*告訴瀏覽器以下transform操作是在3D場景下進(jìn)行的*/     

  16.         }     

  17.      

  18.         #login-panel {     

  19.             /*-webkit-transform: rotateX(45deg);*/     

  20.         }     

  21.      

  22.         .login {     

  23.             width: 500px;     

  24.             height: 400px;     

  25.             margin: 100px auto;     

  26.             text-align: center;     

  27.      

  28.             border: 1px solid #ABCDEF;     

  29.             border-radius: 10px;     

  30.             box-shadow: 0 0 3px 3px #ABCDEF;     

  31.         }     

  32.         .login h2 {     

  33.             margin: 50px 0;     

  34.         }     

  35.         .login-row span {     

  36.             font-size: 18px;     

  37.         }     

  38.         .login-row input {     

  39.             height: 25px;     

  40.             line-height: 25px;     

  41.             padding: 0 10px;     

  42.             margin: 10px 0;     

  43.         }     

  44.      

  45.         .btn {     

  46.             outline: none;     

  47.             background-color: aliceblue;     

  48.      

  49.             cursor: pointer;     

  50.             width: 90px;     

  51.             height: 40px;     

  52.             border: 1px solid #DDD;     

  53.             border-radius: 5px;     

  54.             margin: 30px 20px;     

  55.             font-size: 16px;     

  56.      

  57.             transition: background-color 0.5s;     

  58.             -webkit-transition: background-color 0.5s;     

  59.             -moz-transition: background-color 0.5s;     

  60.             -o-transition: background-color 0.5s;     

  61.         }     

  62.         .btn:hover {     

  63.             background-color: antiquewhite;     

  64.         }     

  65.      

  66.         .login-success {     

  67.             font-size: 20px;     

  68.             padding: 50px;     

  69.         }     

  70.     </style>     

  71.      

  72.     <script>     

  73.         var loginBtn, regiBtn;     

  74.         window.onload = function() {     

  75.             loginBtn = document.getElementById("login");     

  76.             loginBtn.onclick = rotate;     

  77.             regiBtn = document.getElementById("regi");     

  78.             regiBtn.onclick = rotate;     

  79.         };     

  80.      

  81.         function rotate() {     

  82.             var x = 0;     

  83.             var panel = document.getElementById("login-panel");     

  84.             panel.style.transform = "rotateX(0deg)";     

  85.             panel.style.webkitTransform = "rotateX(0deg)";     

  86.      

  87.             var flag = true;     

  88.             var timer = setInterval(function() {     

  89.                 if(Math.round(x) >= 90 && flag) {     

  90.                     panel.innerHTML = "<p class='login-success'>登陸成功</p>";     

  91.                     flag = false;     

  92.                 }     

  93.      

  94.                 if(Math.round(x) >= 358) {     

  95.                     panel.style.transform = "rotateX(360deg)";     

  96.                     panel.style.webkitTransform = "rotateX(360deg)";     

  97.                     clearInterval(timer);     

  98.                     return false;     

  99.                 } else {     

  100.                     x += 2 + (360 - x) / 60;     

  101.                     panel.style.transform = "rotateX(" + x + "deg)";     

  102.                     panel.style.webkitTransform = "rotateX(" + x + "deg)";     

  103.                 }     

  104.             }, 25);     

  105.         }     

  106.     </script>     

  107. </head>     

  108. <body>     

  109.     <div class="container">     

  110.         <div class="login" id="login-panel">     

  111.             <h2>登陸</h2>     

  112.             <div class="login-row">     

  113.                 <label for="username"><span>賬號：</span></label>     

  114.                 <input type="text" id="username" name="username">     

  115.             </div>     

  116.             <div class="login-row">     

  117.                 <label for="password"><span>密碼：</span></label>     

  118.                 <input type="password" id="password" name="password">     

  119.             </div>     

  120.             <div class="login-row">     

  121.                 <button id="login" class="btn" type="button">登陸</button>     

  122.                 <button id="regi" class="btn" type="button">注冊</button>     

  123.             </div>     

  124.         </div>     

  125.     </div>     

  126. </body>     

  127. </html>    

感謝各位的閱讀，以上就是“怎么用CSS3實現(xiàn)登陸面板3D旋轉(zhuǎn)效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么用CSS3實現(xiàn)登陸面板3D旋轉(zhuǎn)效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手