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); }
