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

互联网
我赞美你品格高尚，崇敬你洁白无瑕。我爱你、想你、盼你，像对每一个季节那样。我爱你、想你、盼你，不管世俗的偏见怎样厉害。冬――四季之一的冬，你来吧！我喜欢你纯净的身躯，喜欢你严厉的性格，我要在你的怀抱中锻炼、奋斗、成熟……你可以和春天的万花，夏天的麦浪，秋天的瓜果……比美！

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

效果图：

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

旋转结束：

示例代码：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>登陆面板旋转</title>
  6. <style>
  7. body{
  8. font-family:"MicrosoftYaHei","微软雅黑";
  9. }
  11. .container{
  12. /*创建3D场景*/
  13. -webkit-perspective:800;
  14. -webkit-perspective-origin:50%50%;
  15. -webkit-transform-style:-webkit-preserve-3d;/*告诉浏览器以下transform操作是在3D场景下进行的*/
  16. }
  18. #login-panel{
  19. /*-webkit-transform:rotateX(45deg);*/
  20. }
  22. .login{
  23. width:500px;
  24. height:400px;
  25. margin:100pxauto;
  26. text-align:center;
  28. border:1pxsolid#ABCDEF;
  29. border-radius:10px;
  30. box-shadow:003px3px#ABCDEF;
  31. }
  32. .loginh1{
  33. margin:50px0;
  34. }
  35. .login-rowspan{
  36. font-size:18px;
  37. }
  38. .login-rowinput{
  39. height:25px;
  40. line-height:25px;
  41. padding:010px;
  42. margin:10px0;
  43. }
  45. .btn{
  46. outline:none;
  47. background-color:aliceblue;
  49. cursor:pointer;
  50. width:90px;
  51. height:40px;
  52. border:1pxsolid#DDD;
  53. border-radius:5px;
  54. margin:30px20px;
  55. font-size:16px;
  57. transition:background-color0.5s;
  58. -webkit-transition:background-color0.5s;
  59. -moz-transition:background-color0.5s;
  60. -o-transition:background-color0.5s;
  61. }
  62. .btn:hover{
  63. background-color:antiquewhite;
  64. }
  66. .login-success{
  67. font-size:20px;
  68. padding:50px;
  69. }
  70. </style>
  72. <script>
  73. varloginBtn,regiBtn;
  74. window.onload=function(){
  75. loginBtn=document.getElementById("login");
  76. loginBtn.onclick=rotate;
  77. regiBtn=document.getElementById("regi");
  78. regiBtn.onclick=rotate;
  79. };
  81. functionrotate(){
  82. varx=0;
  83. varpanel=document.getElementById("login-panel");
  84. panel.style.transform="rotateX(0deg)";
  85. panel.style.webkitTransform="rotateX(0deg)";
  87. varflag=true;
  88. vartimer=setInterval(function(){
  89. if(Math.round(x)>=90&&flag){
  90. panel.innerHTML="<pclass='login-success'>登陆成功</p>";
  91. flag=false;
  92. }
  94. if(Math.round(x)>=358){
  95. panel.style.transform="rotateX(360deg)";
  96. panel.style.webkitTransform="rotateX(360deg)";
  97. clearInterval(timer);
  98. returnfalse;
  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. <divclass="container">
  110. <divclass="login"id="login-panel">
  111. <h1>登陆</h1>
  112. <divclass="login-row">
  113. <labelfor="username"><span>账号：</span></label>
  114. <inputtype="text"id="username"name="username">
  115. </div>
  116. <divclass="login-row">
  117. <labelfor="password"><span>密码：</span></label>
  118. <inputtype="password"id="password"name="password">
  119. </div>
  120. <divclass="login-row">
  121. <buttonid="login"class="btn"type="button">登陆</button>
  122. <buttonid="regi"class="btn"type="button">注册</button>
  123. </div>
  124. </div>
  125. </div>
  126. </body>
  127. </html>

以上就是本文的全部内容，希望对大家的学习有所帮助。