[3D 菜单翻转动画特效]

qq_rbafdi2n CSS3 实现 loading... 最后由 qq_rbafdi2n 于2017年06月08日回复

  • 1 回答
  • 1.3k 浏览

2hhsoi5f0eios.png

2hfxkynqfvms4.png

.nav{
    width: 980px;
    margin: 50px auto;
    background-color: #fdfdfd;
    border: 1px solid #ccc;
}
.nav:after{
    clear:  both;
    display: block;
    overflow: hidden;
    content: '';
}
.nav .item{
    width: 200px;
    height: 100px;
    margin-right: 5px;
    float: left;
    perspective: 9000px;
}
.nav .item a{
    display: block;
    height: 100px;
    text-decoration: none;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    transform-style: preserve-3d;
}
.nav .item a p{
    height: 100px;
    margin: 0;
    line-height: 100px;
    color: #fff;
    text-align: center;
    font-size: 20px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.nav .item a p:first-child{
    background-color: #090;
    -webkit-transform: translateZ(50px);
    -moz-transform: translateZ(50px);
    -ms-transform: translateZ(50px);
    -o-transform: translateZ(50px);
    transform: translateZ(50px);
}
.nav .item a p:last-child{
    background-color: #009;
    -webkit-transform: translateZ(50px) rotateX(-90deg); 
   -moz-transform: translateZ(50px) rotateX(-90deg); 
   -ms-transform: translateZ(50px) rotateX(-90deg);
    -o-transform: translateZ(50px) rotateX(-90deg);
    transform: translateZ(50px) rotateX(-90deg);
}
.nav .item a:hover{
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg); 
    -o-transform: rotateX(90deg); 
   transform: rotateX(90deg);
}
.nav .item a:hover p:last-child{
    margin-top: 0;
    -webkit-transform: translateZ(0) rotateX(-90deg);
    -moz-transform: translateZ(0) rotateX(-90deg); 
    -ms-transform: translateZ(0) rotateX(-90deg);
    -o-transform: translateZ(0) rotateX(-90deg);
    transform: translateZ(0) rotateX(-90deg);}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3Dnav</title>
    <link rel="stylesheet"  type="text/css" href="3Dnav.css">
</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>Poem</p>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <p>歌曲</p>
                    <p>Song</p>
                </a>
            </div>
    </header>
</body>
</html>