首頁 > 開發者 > CSS

CSS3讓登陸面板3D旋轉起來執行個體代碼

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
點擊登陸面板會發生360度旋轉，並顯示資訊，真正使用CSS3讓登陸面板3D旋轉起來，如何?登陸面板3D旋轉，感興趣的小夥伴們可以參考一下

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

：

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

旋轉結束：

範例程式碼：

<!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='login-success'>登陸成功</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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More