Maison > Article > interface Web > CSS3 permet au panneau de connexion de tourner en 3D. Exemple de code.

CSS3 permet au panneau de connexion de tourner en 3D. Exemple de code.

高洛峰original: 2017-03-13 16:47:141650parcourir

Cliquer sur le panneau de connexion fera pivoter de 360 degrés et affichera des informations. Utilisez CSS3 pour véritablement faire pivoter le panneau de connexion en 3D. Les amis intéressés peuvent se référer à l'exemple de cet article <.>

J'ai partagé avec vous le code spécifique pour utiliser CSS3 pour réaliser la rotation 3D du panneau de connexion pour votre référence Le contenu spécifique est le suivant

Rendu :

<.>

CSS3 permet au panneau de connexion de tourner en 3D. Exemple de code. Cliquez pour vous connecter, le panneau de connexion pivotera à 360 degrés et affichera des informations.

CSS3 permet au panneau de connexion de tourner en 3D. Exemple de code. Fin de rotation :

CSS3 permet au panneau de connexion de tourner en 3D. Exemple de code.

Exemple de 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>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction à 6 façons de disposition CSS à hauteur égaleArticle suivant：Introduction à 6 façons de disposition CSS à hauteur égale

Articles Liés

Voir plus