Heim > Artikel > Web-Frontend > CSS3 ermöglicht die Drehung des Anmeldefensters im 3D-Beispielcode

CSS3 ermöglicht die Drehung des Anmeldefensters im 3D-Beispielcode

高洛峰Original: 2017-03-13 16:47:141650Durchsuche

Durch Klicken auf das Anmeldefeld wird es um 360 Grad gedreht und Informationen werden angezeigt, um das Anmeldefeld wirklich in 3D zu drehen. Weitere Informationen finden Sie im Beispiel in diesem Artikel 🎜>

Ich habe Ihnen den spezifischen Code für die Verwendung von CSS3 zur Realisierung der 3D-Rotation des Login-Panels als Referenz mitgeteilt. Der spezifische Inhalt ist wie folgt

Rendering:

CSS3 ermöglicht die Drehung des Anmeldefensters im 3D-Beispielcode

Klicken Sie hier, um sich anzumelden. Das Anmeldefeld dreht sich um 360 Grad und zeigt Informationen an.

CSS3 ermöglicht die Drehung des Anmeldefensters im 3D-Beispielcode

Ende der Rotation:

CSS3 ermöglicht die Drehung des Anmeldefensters im 3D-Beispielcode

Beispielcode:

<!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>

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonCSS3 ermöglicht die Drehung des Anmeldefensters im 3D-Beispielcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in 6 Möglichkeiten des CSS-Layouts mit gleicher HöheNächster Artikel：Einführung in 6 Möglichkeiten des CSS-Layouts mit gleicher Höhe

In Verbindung stehende Artikel

Mehr sehen