本文实例为大家分享了利用CSS3实现登陆面板3D旋转起来的具体代码，供大家参考，具体内容如下
效果图：
点击登陆，登陆面板会发生360度旋转，并显示信息。
旋转结束：
示例代码：
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>登陆面板旋转</title> <style> body{ font-family:"MicrosoftYaHei","微软雅黑"; } .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:100pxauto; text-align:center; border:1pxsolid#ABCDEF; border-radius:10px; box-shadow:003px3px#ABCDEF; } .loginh1{ margin:50px0; } .login-rowspan{ font-size:18px; } .login-rowinput{ height:25px; line-height:25px; padding:010px; margin:10px0; } .btn{ outline:none; background-color:aliceblue; cursor:pointer; width:90px; height:40px; border:1pxsolid#DDD; border-radius:5px; margin:30px20px; font-size:16px; transition:background-color0.5s; -webkit-transition:background-color0.5s; -moz-transition:background-color0.5s; -o-transition:background-color0.5s; } .btn:hover{ background-color:antiquewhite; } .login-success{ font-size:20px; padding:50px; } </style> <script> varloginBtn,regiBtn; window.onload=function(){ loginBtn=document.getElementById("login"); loginBtn.onclick=rotate; regiBtn=document.getElementById("regi"); regiBtn.onclick=rotate; }; functionrotate(){ varx=0; varpanel=document.getElementById("login-panel"); panel.style.transform="rotateX(0deg)"; panel.style.webkitTransform="rotateX(0deg)"; varflag=true; vartimer=setInterval(function(){ if(Math.round(x)>=90&&flag){ panel.innerHTML="<pclass='login-success'>登陆成功</p>"; flag=false; } if(Math.round(x)>=358){ panel.style.transform="rotateX(360deg)"; panel.style.webkitTransform="rotateX(360deg)"; clearInterval(timer); returnfalse; }else{ x+=2+(360-x)/60; panel.style.transform="rotateX("+x+"deg)"; panel.style.webkitTransform="rotateX("+x+"deg)"; } },25); } </script> </head> <body> <divclass="container"> <divclass="login"id="login-panel"> <h1>登陆</h1> <divclass="login-row"> <labelfor="username"><span>账号：</span></label> <inputtype="text"id="username"name="username"> </div> <divclass="login-row"> <labelfor="password"><span>密码：</span></label> <inputtype="password"id="password"name="password"> </div> <divclass="login-row"> <buttonid="login"class="btn"type="button">登陆</button> <buttonid="regi"class="btn"type="button">注册</button> </div> </div> </div> </body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助。
【CSS3让登陆面板3D旋转起来】相关文章：