css3之3d导航

css3的新属性非常不错，目前IE除外其他浏览器都已支持

实现原理:比如元素a在hover时候可以改变元素b的状态。

效果如本农导航，欢迎采用和建议~

a:hover b{ 

  执行简单动画效果

}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D-navBar</title>
    <link rel="stylesheet" href="css/3dnavBar.css">
</head>
<body>
<header>
    <ul class="block-menu" id="F1">
        <li>
            <a href="javascript:;" class="three-d">Home
                <span class="three-d-box">
                    <span class="front">Home</span>
                    <span class="back">Home</span>
                </span>
            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">Html
                <span class="three-d-box">
                    <span class="front">Html</span>
                    <span class="back">Html</span>
                </span>
            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">CSS
                <span class="three-d-box">
                    <span class="front">CSS</span>
                    <span class="back">CSS</span>
                </span>
            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">Javascript
                <span class="three-d-box">
                    <span class="front">Javascript</span>
                    <span class="back">Javascript</span>
                </span>
            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">jQuery
                <span class="three-d-box">
                    <span class="front">jQuery</span>
                    <span class="back">jQuery</span>
                </span>
            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">ajax
                <span class="three-d-box">
                    <span class="front">ajax</span>
                    <span class="back">ajax</span>
                </span>
            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">php
                <span class="three-d-box">
                    <span class="front">php</span>
                    <span class="back">php</span>
                </span>
            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">bootstrap
                <span class="three-d-box">
                    <span class="front">bootstrap</span>
                    <span class="back">bootstrap</span>
                </span>
            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">angular
                <span class="three-d-box">
                    <span class="front">angular</span>
                    <span class="back">angular</span>
                </span>
            </a>
        </li>
    </ul>
</header>
</body>
</html>

CSS

*{
    list-style: none;
    margin: 0;
    padding: 0;
}
.block-menu{
    background:#AA7A53;
    height:50px;
    overflow:hidden;
    padding-left:40px;
}
.block-menu li{
    float: left;
    margin-left: 15px;
}
.block-menu li a{
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    font-size:16px;
    line-height:20px;
    font-weight:bold;
    font-family: Arial, sans-serif;
    display:block;
    padding:15px 10px;
}
.three-d-box,.front,.back{
    width: 100%;
    display: block;
    height:50px;
    position:absolute;
    top:0;
    left:0;
    text-align: center;
    line-height: 50px;
    background:#AA7A53;
}
.three-d{
    perspective:200px;
    position:relative;
}
.three-d-box{
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform:translateZ(-25px);
    -moz-transform:translateZ(-25px);
    -o-transform:translateZ(-25px);
    -ms-transform:translateZ(-25px);
    transform:translateZ(-25px);
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.front{
    -webkit-transform:rotateX(0deg) translateZ(25px);
    -moz-transform:rotateX(0deg) translateZ(25px);
    -o-transform:rotateX(0deg) translateZ(25px);
    -ms-transform:rotateX(0deg) translateZ(25px);
    transform:rotateX(0deg) translateZ(25px);
}
.back{
    -webkit-transform:rotateX(-90deg) translateZ(25px);
    -moz-transform:rotateX(-90deg) translateZ(25px);
    -o-transform:rotateX(-90deg) translateZ(25px);
    -ms-transform:rotateX(-90deg) translateZ(25px);
    transform:rotateX(-90deg) translateZ(25px);
}
.three-d:hover .three-d-box{
    -webkit-transform: translateZ(-25px) rotateX(90deg);
    -moz-transform: translateZ(-25px) rotateX(90deg);
    -o-transform: translateZ(-25px) rotateX(90deg);
    -ms-transform: translateZ(-25px) rotateX(90deg);
    transform: translateZ(-25px) rotateX(90deg);
}

 

posted @ 2016-05-12 13:32  逗伴不是瓣  阅读(490)  评论(0)  编辑  收藏  举报