CSS3讓登陸面板3D旋轉起來實例程式碼-css教學-PHP中文網

登陆

首頁

web前端

css教學

CSS3讓登陸面板3D旋轉起來實例程式碼

高洛峰

Mar 13, 2017 pm 04:47 PM

css3

點擊登陸面板會發生360度旋轉，並顯示訊息，真正使用CSS3讓登陸面板3D旋轉起來，如何實現登陸面板3D旋轉，感興趣的小伙伴們可以參考一下

本文實例為大家分享了利用CSS3實現登陸面板3D旋轉起來的具體程式碼，供大家參考，具體內容如下

#效果圖：

CSS3讓登陸面板3D旋轉起來實例程式碼

點擊登陸，登陸面板會發生360度旋轉，並顯示訊息。

CSS3讓登陸面板3D旋轉起來實例程式碼

旋轉結束：

CSS3讓登陸面板3D旋轉起來實例程式碼

#範例程式碼：##

<!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 id="登陆">登陆</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>

登入後複製

以上就是本文的全部內容，希望對大家的學習有幫助。

以上是CSS3讓登陸面板3D旋轉起來實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn