点击登陆面板会发生360度旋转，并显示信息，真正使用css3让登陆面板3d旋转起来，如何实现登陆面板3d旋转，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了利用CSS3实现登陆面板3D旋转起来的具体代码，供大家参考，具体内容如下
效果图：
点击登陆，登陆面板会发生360度旋转，并显示信息。
旋转结束：
示例代码：
登陆面板旋转 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; } 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 = "登陆成功
"; 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); }
登陆
立即学习“前端免费学习笔记（深入）”；
以上就是本文的全部内容，希望对大家的学习有所帮助。
以上就是CSS3让登陆面板3D旋转起来实例代码的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1607999.html
微信扫一扫 
支付宝扫一扫 
