无法实现翻转效果

eminem john CSS3 实现 loading... 最后由 极客学院_ASMITA 于2016年05月24日回复

  • 1 回答
  • 767 浏览

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .nav{

            width:950px;

            margin:50px auto;

            background-color: #ff8c00;

            border:2px solid #5b8b87;

        }

        .nav:after{

            clear:both;

            display:block;

            overflow:hidden;

            content:"";

        }

        .nav .item{

            width:300px;

            height:100px;

            background-color:darkgreen;

            float:left;

            margin-right:5px;

            perspective:4000px;/*3d元素距离视图的距离,对子元素起作用*/

        }

        .nav .item a{

           height:100px;

            display:block;

            text-decoration: none;

            transform:all .5s;

            transform-style:preserve-3d;

        }

        .nav .item a p{

            height:100px;

            color:white;

            font-size:40px;

            font-family:cursive;

            line-height:100px;

            margin:0;

            text-align:center;

            border-radius:2px;

            transform:all .5s;

        }

        .nav .item a p:first-child{

            background-color: #2f7a26;

            transform:translateZ(50px);

        }

        .nav .item a p:last-child{

            background-color:chocolate;

            transform:translateZ(50px) rotateX(-90deg);

            margin-top:-100px;

        }

        .nav .item a:hover{

           transform:rotateX(90deg);

        }

        .nav .item a:hover p:last-child{

            margin-top:0px;

            transform:translateZ(0) rotateX(-90deg);

        }

    </style>

</head>

<body>

    <header class="nav">

        <div class="item">

            <a href="#">

                <p>首页</p>

                <p>HOME</p>

            </a>

        </div>

        <div class="item">

            <a href="#">

                <p>问答</p>

                <p>Q&E</p>

            </a>

        </div>

        <div class="item">

            <a href="#">

                <p>关于我们</p>

                <p>About As</p>

            </a>

        </div>

    </header>

</body>

</html>

  • 极客学院_ASMITA 2016年05月24日 回答 #1楼
  • 反转要用transition来做

    这样才能看到动画效果,你这个实现了切换,但是没有中间过程。

    还需要设置为3d,

    transform-style: preserve-3d;
  • 0 评论