您的当前位置：首页 CSS3让登陆面板3D旋转起来实例代码

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

时间：2020-11-27 来源：智榕旅游

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

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

效果图：

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

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

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

旋转结束：

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

示例代码：

<!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>
 <p class="container">
 <p class="login" id="login-panel">
 <h1>登陆</h1>
 <p class="login-row">
 <label for="username"><span>账号：</span></label>
 <input type="text" id="username" name="username">
 </p>
 <p class="login-row">
 <label for="password"><span>密码：</span></label>
 <input type="password" id="password" name="password">
 </p>
 <p class="login-row">
 <button id="login" class="btn" type="button">登陆</button>
 <button id="regi" class="btn" type="button">注册</button>
 </p>
 </p>
 </p>
</body>
</html>