CSS3让登陆面板3D旋转起来
更新时间:2023-04-06 23:32:17 阅读： 评论：0
本文实例为大家分享了利用css3实现登陆面板3d旋转起来的具体代码，供大家参考，具体内容如下
效果图：
点击登陆，登陆面板会发生360度旋转，并显示信息。
旋转结束：
示例代码：
xml/html code
复制内容到剪贴板
<!doctypehtml> <htmllang=“en”> <head> <metachart=“utf-8”> <title>登陆面板旋转</title> <style> body{ font-family:“microsoftyahei”,“微软雅黑”; } .container{ /*创建3d场景*/ -webkit-perspective:800; -webkit-perspective-origin:50%50%; -webkit-transform-style:-webkit-prerve-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.getel气象专业ementbyid(“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=tinterval(function(){ if(math.round(x)>=90&&flag){ panel.innerhtml=“<pclass=’login-success’>登陆成功</p>”; flag=fal; } if(math.round(x)>=358){ panel.style.transform=“rotatex(360deg)”; panel.style.webkittransform=“rotatex(360deg)”; clearinterval(timer); returnfal; }el{ 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网络时代=“urname”>want过去式<span>账号：</span></label> <inputtype=“text”id=“urname”name=“urname”> </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>以上就是本文的全部内容，希望对大家的学习有所帮助。
本文word下载地址：CSS3让登陆面板3D旋转起来.doc
本文 PDF 下载地址：CSS3让登陆面板3D旋转起来.pdf
