CSS3 allows the login panel to rotate in 3D Example code-CSS Tutorial-php.cn

CSS3 allows the login panel to rotate in 3D Example code

高洛峰

Release： 2017-03-13 16:47:14

Original

1659 people have browsed it

Clicking on the login panel will rotate 360 degrees and display information. Use CSS3 to truly rotate the login panel in 3D. How to achieve 3D rotation of the login panel. Interested friends can refer to the example in this article

I have shared with you the specific code for using CSS3 to realize the 3D rotation of the login panel for your reference. The specific content is as follows

Rendering:

CSS3 allows the login panel to rotate in 3D Example code

Click to log in, The login panel will rotate 360 degrees and display information.

CSS3 allows the login panel to rotate in 3D Example code

End of rotation:

CSS3 allows the login panel to rotate in 3D Example code

Sample code:

<!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: 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;     
        }     
    </style>

    <script>
        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 = "<p class=&#39;login-success&#39;>登陆成功</p>";     
                    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);     
        }     
    </script>
</head>
<body>
    <p class="container">
        <p class="login" id="login-panel">
            <h1>登陆</h1>
            <p class="login-row">
                <label for="username"><span>账号：</span></label>
                <input type="text" id="username" name="username">
            </p>
            <p class="login-row">
                <label for="password"><span>密码：</span></label>
                <input type="password" id="password" name="password">
            </p>
            <p class="login-row">
                <button id="login" class="btn" type="button">登陆</button>
                <button id="regi" class="btn" type="button">注册</button>
            </p>
        </p>
    </p>
</body>
</html>

Copy after login

The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of CSS3 allows the login panel to rotate in 3D Example code. For more information, please follow other related articles on the PHP Chinese website!