css3之3d导航

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

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

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

a:hover b{

执行简单动画效果

}

HTML

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D-navBartitle>
    <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">Homespan>
                    <span class="back">Homespan>
                span>
            a>
        li>
        <li>
            <a href="Javascript:;" class="three-d">Html
                <span class="three-d-box">
                    <span class="front">Htmlspan>
                    <span class="back">Htmlspan>
                span>
            a>
        li>
        <li>
            <a href="Javascript:;" class="three-d">CSS
                <span class="three-d-box">
                    <span class="front">CSSspan>
                    <span class="back">CSSspan>
                span>
            a>
        li>
        <li>
            <a href="Javascript:;" class="three-d">Javascript
                <span class="three-d-box">
                    <span class="front">Javascriptspan>
                    <span class="back">Javascriptspan>
                span>
            a>
        li>
        <li>
            <a href="Javascript:;" class="three-d">jQuery
                <span class="three-d-box">
                    <span class="front">jQueryspan>
                    <span class="back">jQueryspan>
                span>
            a>
        li>
        <li>
            <a href="Javascript:;" class="three-d">ajax
                <span class="three-d-box">
                    <span class="front">ajaxspan>
                    <span class="back">ajaxspan>
                span>
            a>
        li>
        <li>
            <a href="Javascript:;" class="three-d">php
                <span class="three-d-box">
                    <span class="front">phpspan>
                    <span class="back">phpspan>
                span>
            a>
        li>
        <li>
            <a href="Javascript:;" class="three-d">bootstrap
                <span class="three-d-box">
                    <span class="front">bootstrapspan>
                    <span class="back">bootstrapspan>
                span>
            a>
        li>
        <li>
            <a href="Javascript:;" class="three-d">angular
                <span class="three-d-box">
                    <span class="front">angularspan>
                    <span class="back">angularspan>
                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);
}