CSS3让登陆面板3D旋转起来

Ruth ·

更新时间:2024-11-14

· 907 次阅读

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

效果图：

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

旋转结束：

示例代码：

XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆面板旋转</title> <style> body { font-family: "Microsoft YaHei", "微软雅黑"; } .container { /*创建3D场景*/ -webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; -webkit-transform-style: -webkit-preserve-3d; /*告诉浏览器以下transform操作是在3D场景下进行的*/ } #login-panel { /*-webkit-transform: rotateX(45deg);*/ } .login { width: 500px; height: 400px; margin: 100px auto; text-align: center; border: 1px solid #ABCDEF; border-radius: 10px; box-shadow: 0 0 3px 3px #ABCDEF; } .login h1 { margin: 50px 0; } .login-row span { font-size: 18px; } .login-row input { height: 25px; line-height: 25px; padding: 0 10px; margin: 10px 0; } .btn { outline: none; background-color: aliceblue; cursor: pointer; width: 90px; height: 40px; border: 1px solid #DDD; border-radius: 5px; margin: 30px 20px; font-size: 16px; transition: background-color 0.5s; -webkit-transition: background-color 0.5s; -moz-transition: background-color 0.5s; -o-transition: background-color 0.5s; } .btn:hover { background-color: antiquewhite; } .login-success { font-size: 20px; padding: 50px; } </style> <script> var loginBtn, regiBtn; window.onload = function() { loginBtn = document.getElementById("login"); loginBtn.onclick = rotate; regiBtn = document.getElementById("regi"); regiBtn.onclick = rotate; }; function rotate() { var x = 0; var panel = document.getElementById("login-panel"); panel.style.transform = "rotateX(0deg)"; panel.style.webkitTransform = "rotateX(0deg)"; var flag = true; var timer = setInterval(function() { if(Math.round(x) >= 90 && flag) { panel.innerHTML = "<p class='login-success'>登陆成功</p>"; flag = false; } if(Math.round(x) >= 358) { panel.style.transform = "rotateX(360deg)"; panel.style.webkitTransform = "rotateX(360deg)"; clearInterval(timer); return false; } else { x += 2 + (360 - x) / 60; panel.style.transform = "rotateX(" + x + "deg)"; panel.style.webkitTransform = "rotateX(" + x + "deg)"; } }, 25); } </script> </head> <body> <div class="container"> <div class="login" id="login-panel"> <h1>登陆</h1> <div class="login-row"> <label for="username"><span>账号：</span></label> <input type="text" id="username" name="username"> </div> <div class="login-row"> <label for="password"><span>密码：</span></label> <input type="password" id="password" name="password"> </div> <div class="login-row"> <button id="login" class="btn" type="button">登陆</button> <button id="regi" class="btn" type="button">注册</button> </div> </div> </div> </body> </html>

登陆 CSS3 面板 3d 3d旋转 CSS

1024 个赞