CCS实现3D立体变换导航

最新推荐文章于 2024-11-29 18:28:53 发布

shuffle_boy

最新推荐文章于 2024-11-29 18:28:53 发布

阅读量360

点赞数

分类专栏： css3 文章标签： css3 html5 javascript

本文章版权归shuffleboy所有，转载请注明出处

本文链接：https://blog.youkuaiyun.com/shuffle_boy/article/details/105390010

版权

css3 专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>立体变换导航</title>
    <style>
      *{
          padding: 0;
          margin: 0;
          list-style: none;
          text-decoration: none;
      }
      .clearfix::after{
         content:"";
         display: block;
         height: 0;
         clear: both;
         zoom:1;
      }
      .nav{
          width: 36.5%;
          margin: 30px auto 0;

      }
      .nav ul{
          /*clear: left;*/
          /* overflow: hidden; */
      }
      .nav ul li{
          float: left;
          background-color:rgb(0, 128, 1);
          cursor:pointer;
          transition: all 0.3s linear;
          position: relative;
          transform-style:preserve-3d;
          /* text-align: center; */
      }
      .nav ul li a{
          font-size:16px;
          padding:5px 5px;
          color:#000;
          position: absolute;
          white-space: nowrap;
      }
      .nav ul li a:nth-of-type(1){
          transform:translateZ(16PX);
          background-color:rgb(0, 128, 1);
      }
      .nav ul li a:nth-of-type(2){
          transform: rotateX(90deg) translateZ(16PX);
          /* transform-origin:top; */
          background-color:rgb(255, 189, 202);
          
          
      }
      .nav ul li:hover{
        transform:rotateX(-90deg);
        /* transform-origin:top; */
        transition: all 0.3s linear;
      }
    </style>
</head>
<body>
    <div class="nav">
        <ul class="clearfix">
            <li><a href="###">UI设计培训</a><a href="###">UI设计培训</a></li>
            <li><a href="###">PHP培训</a><a href="###">PHP培训</a></li>
            <li><a href="###">网络营销培训</a><a href="###">网络营销培训</a></li>
            <li><a href="###">前端开发培训</a><a href="###">前端开发培训</a></li>
            <li><a href="###">C++培训</a><a href="###">C++培训</a></li>
            <li><a href="###">IOS培训</a><a href="###">IOS培训</a></li>
            <li><a href="###">安卓培训</a><a href="###">安卓培训</a></li>
            <li><a href="###">云计算培训</a><a href="###">云计算培训</a></li>
        </ul>
    </div>
<script>
  
  var f=document.querySelectorAll('li');
  for(var i=0;i<f.length;i++){
    f[i].style.width=f[i].childNodes[0].offsetWidth+'px';
    f[i].style.height=f[i].childNodes[0].offsetHeight+'px';
  }
  
</script>
</body>
</html>