怎么在CSS3中实现一个可翻转的hover效果

怎么在css3中实现一个可翻转的hover效果？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

1.css

  html {      font-family: sans-serif;      -ms-text-size-adjust: 100%;      -WEBkit-text-size-adjust: 100%;  }  body {      margin: 0 auto;      text-align: center;      background-color: #FFFFCC;  }  ul {      list-style: none;      float: left;      margin: 0;      padding: 0;  }  a {      cursor: pointer;  }  div {      display: inline-block;      margin: 40px;  }  ul li {      width: 200px;      height: 40px;      line-height: 40px;      text-align: center;      margin: 10px;      background-color: #747474;      border-radius: 4px;      color: white;  }  dis-block{      display: block;  }    #nav1 ul li {      transfORM-style: preserve-3D;      -webkit-transform-style: preserve-3d;      -ms-transform-style: preserve-3d;      -moz-transform-style: preserve-3d;      transition: 0.5s;      -webkit-transition: 0.5s;      -ms-transition: 0.5s;      -moz-transition: 0.5s;  }  #nav1 ul li:hover {      transform: translateZ(30px) rotateX(360deg) scale(1.1);      -webkit-transform: translateZ(30px) rotateX(360deg) scale(1.1);      -ms-transform: translateZ(30px) rotateX(360deg) scale(1.1);      -moz-transform: translateZ(30px) rotateX(360deg) scale(1.1);  }    #nav2 ul li {      transform-style: preserve-3d;      -webkit-transform-style: preserve-3d;      -ms-transform-style: preserve-3d;      -moz-transform-style: preserve-3d;      transition: 0.5s;      -webkit-transition: 0.5s;      -ms-transition: 0.5s;      -moz-transition: 0.5s;  }  #nav2 ul li:hover {      transform: translateZ(30px) scale(1.1);      -webkit-transform: translateZ(30px) scale(1.1);      -ms-transform: translateZ(30px) scale(1.1);      -moz-transform: translateZ(30px) scale(1.1);  }    #nav4 ul li {      transform-style: preserve-3d;      -webkit-transform-style: preserve-3d;      -ms-transform-style: preserve-3d;      -moz-transform-style: preserve-3d;      transition: 0.5s;      -webkit-transition: 0.5s;      -ms-transition: 0.5s;      -moz-transition: 0.5s;  }  #nav4 ul li:hover {      transform: translateZ(30px) scale(0.9);      -webkit-transform: translateZ(30px) scale(0.9);      -ms-transform: translateZ(30px) scale(0.9);      -moz-transform: translateZ(30px) scale(0.9);  }    #nav3 ul li {      transform-style: preserve-3d;      -webkit-transform-style: preserve-3d;      -ms-transform-style: preserve-3d;      -moz-transform-style: preserve-3d;      transition: 0.5s;      -webkit-transition: 0.5s;      -ms-transition: 0.5s;      -moz-transition: 0.5s;  }  #nav3 ul li:hover {      transform: translateZ(30px) rotateY(360deg) scale(1.1);      -webkit-transform: translateZ(30px) rotateY(360deg) scale(1.1);      -ms-transform: translateZ(30px) rotateY(360deg) scale(1.1);      -moz-transform: translateZ(30px) rotateY(360deg) scale(1.1);  }    btn1 {      background-color: #1AAB8A;      color: white;      font-size: 18px;      height: 60px;      width: 150px;      border: 0;      transition: 800ms ease all;      outline: none;      position: relative;  }  btn1:hover {      background: #fff;      color: #1AAB8A;  }  btn1:before, .btn1:after {      content: '';      position: absolute;      height: 2px;      width: 0;      background: #1AAB8A;      transition: 400ms ease all;  }  btn1:before {      right: 0;      top: 0;  }  btn1:after {      left: 0;      bottom: 0;  }  btn1:hover:before, .btn1:hover:after {      width: 100%;      transition: 800ms ease all;  }

2.html

<div id="nav1">              <p>前后翻转</p>              <ul>                  <li>                      <a>home</a>                  </li>                  <li>                      <a>js</a>                  </li>                  <li>                      <a>Jquery</a>                  </li>                  <li>                      <a>div+CSS</a>                  </li>                  <li>                      <a>css3</a>                  </li>              </ul>          </div>          <div id="nav2">              <p>上浮</p>              <ul>                  <li>                      <a>home</a>                  </li>                  <li>                      <a>js</a>                  </li>                  <li>                      <a>jquery</a>                  </li>                  <li>                      <a>div+css</a>                  </li>                  <li>                      <a>css3</a>                  </li>              </ul>          </div>          <div id="nav4">              <p>下浮</p>              <ul>                  <li>                      <a>home</a>                  </li>                  <li>                      <a>js</a>                  </li>                  <li>                      <a>jquery</a>                  </li>                  <li>                      <a>div+css</a>                  </li>                  <li>                      <a>css3</a>                  </li>              </ul>          </div>          <div id="nav3">              <p>左右翻转</p>              <ul>                  <li>                      <a>home</a>                  </li>                  <li>                      <a>js</a>                  </li>                  <li>                      <a>jquery</a>                  </li>                  <li>                      <a>div+css</a>                  </li>                  <li>                      <a>css3</a>                  </li>              </ul>          </div>          <div class="dis-block">              <p>按钮hover效果</p>              <button class="btn1" type="button">hover!</button>          </div>

效果：

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注编程网精选频道，感谢您对编程网的支持。