你的位置:首页 > 网页设计

[网页设计]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);}