导航背景转化动画效果

3D旋转导航菜单实现

最新推荐文章于 2025-09-05 02:37:06 发布

weixin_34341229

最新推荐文章于 2025-09-05 02:37:06 发布

阅读量88

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhp404/articles/4308563.html

本文介绍了一种使用HTML和CSS实现的3D旋转导航菜单。该导航菜单包含多个条目，每个条目都有一个垂直悬挂的子菜单项，当鼠标悬停在主菜单项上时，子菜单项会通过3D旋转的方式展现出来。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>制作3D旋转导航</title>
   <style>
   *{margin:0;padding:0;}
   ul{list-style:none;}
   .clearfix{zoom:1;}
   .clearfix:after{content:'\20';display:block;height:0;clear:both;}

   .nav{
       width:950px;
       margin:50px auto 0;
       background:#74ADAA;
   }
   .nav li{
       float:left;
       border-right:1px solid #fff;
       position:relative;
       height:50px;
       overflow:hidden;
   }
   .nav li a{
       display:block;
       width:100px;
       height:50px;
       line-height:50px;
       text-align:center;
       color:#fff;
       font-size:20px;
       text-decoration:none;
       text-transform:capitalize;
   }
   .nav li span a{
       transform:rotatex(-90deg);
       transition:all .3s ease-in;
       transform-origin:0 0;
   }

   .nav li:hover span a{transform:rotatex(0deg) translatey(-50px);background:#f00;}
   </style>
</head>

<body>
<ul class="nav clearfix">
   <li>
       <a href="#">home</a>
       <span><a href="#">test</a></span>
   </li>
   <li>
       <a href="#">html5</a>
       <span><a href="#">test</a></span>
   </li>
</ul>
</body>
</html>