3D 登陆效果 移动端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ::-webkit-scrollbar {
        display: none; /* Chrome Safari */
        }
        /* body:hover main{
            transform: perspective(900px) rotateY(180deg);
        } */
        main{
            width: 100vw;
            height: 100vh;
            transform: perspective(900px);
            transform-style: preserve-3d;
            transition: 2s;
        }
        main.login{
            transform: perspective(900px) rotateY(0deg);
        }
        main.register{
            transform: perspective(900px) rotateY(180deg);
        }
        div{
            position: absolute;
            width: 100%;
            height: 100%;
            background: turquoise;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 4em;
            text-transform: uppercase;
            color: wheat;
            backface-visibility: hidden;/*背面隐藏*/
        }
        div i[class^="fa"]{
            font-size: 1.5em;
        }/*强调*/
        div span{
            color: #fff3;
            font-size:0.5em;
            opacity: 0.8;
        }
        div:nth-child(1){
            background: #1abc9c;
        }
        div:nth-child(2){
            background: #c0392b;
            transform: rotateY(180deg);
        }
        nav{
            position: absolute;
            padding: 10px;
            width: 100%;
            bottom: 80px;
            text-align: center;
            
        }
        nav a{
            padding: 10px 20px;
            background: #34495e;
            margin-right: 20px;
            color: white;
            text-decoration: none;
        } 
    </style>
</head>
<body>
    <main>
        <div>
            <i class="fa fa-home" aria-hidden="true"></i>
            <strong>login</strong>
            <span>一天一个小练习</span>
            
        </div>
        <div>
            <i class="fa fa-user" aria-hidden="true"></i>
            <strong>register</strong>
            <span>一天一个小练习</span>
        </div>
    </main>
    <nav>
        <a href="javascript:;" onclick="change('login')">登陆</a><!-- 无法被点击 -->
        <a href="javascript:;" onclick="change('register')">注册</a>
    </nav>
    <script>
        function change(t){
            switch(t){
                case 'login':
                $("main").removeClass().addClass('login');
                break;
                case 'register':
                $("main").removeClass().addClass('register');
                break;
            }
        }
    </script>
</body>
</html>

 

点赞

发表评论