Home >Web Front-end >CSS Tutorial >CSS3 allows the login panel to rotate in 3D Example code

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

高洛峰Original: 2017-03-13 16:47:141694browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to 6 ways of CSS equal height layoutNext article：Introduction to 6 ways of CSS equal height layout

See more

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

Related articles