本文主要包含CSS3,面板3D旋转,面板旋转等相关知识,佚名 希望在学习及工作中可以帮助到您
本文实例为大家分享了利用CSS3实现登陆面板3D旋转起来的具体代码，供大家参考，具体内容如下
效果图：
点击登陆，登陆面板会发生360度旋转，并显示信息。
旋转结束：
示例代码：
- <!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: p