css旋转导航的示例代码

下面是详细讲解 “CSS旋转导航”的完整攻略。

1. 概述

CSS旋转导航是一种比较常见的网站导航样式，可以将网站导航菜单以立体的效果展现出来，增强网站的视觉效果，同时提升用户体验。

2. 实现方法

2.1 通过 transform 进行旋转

首先，我们需要了解 transform 属性，该属性可以通过 rotate 旋转、translate 平移、scale 缩放等操作来改变元素的位置和形状。因此，我们可以通过使用 transform: rotate() 来实现导航菜单旋转的效果。

具体步骤如下：

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: #333;
}

.nav-item {
  color: #fff;
  font-size: 18px;
  margin: 0 20px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.nav-item:hover {
  transform: rotate(360deg);
}

上述代码中，我们将导航菜单的容器设置为 display: flex，使子元素在容器中水平居中，并在容器背景设置为 #333 的黑色。接着，我们通过 .nav-item 类名来对导航菜单的每一项进行设置，包括设置字体颜色为白色、字体大小为 18px 等，并设置鼠标悬停时的样式为旋转 360°。

2.2 使用伪元素创建边框

除了旋转效果，我们还需要为导航菜单添加立体的效果，即在导航边缘创建黑色的边框。这里，我们可以通过使用伪元素 ::before 和 ::after 创建一个黑色的边框。

具体步骤如下：

.nav-item::before,
.nav-item::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  box-sizing: border-box;
  transform: rotateY(0);
  transition: transform 0.3s ease;
}

.nav-item::before {
  top: -5px;
  left: 0;
  transform-origin: left;
}

.nav-item::after {
  bottom: -5px;
  right: 0;
  transform-origin: right;
}

.nav-item:hover::before,
.nav-item:hover::after {
  transform: rotateY(180deg);
}

上述代码中，我们通过 ::before 和 ::after 伪元素创建一个黑色的边框，并设置它们的宽度和高度均为 100%。由于 ::before 和 ::after 属性是绝对定位的，我们分两次进行了定义，同时设置它们沿着 Y 轴旋转为 0。接着，我们设置 .nav-item::before 在导航菜单的顶部边缘，设置 .nav-item::after 在导航菜单的底部边缘。

同时，我们通过设置 transform-origin 属性来指定旋转中心点。最后，我们设置鼠标悬停时的样式为绕 Y 轴旋转 180°。

3. 示例说明

3.1 示例一

在这个例子中，我们向导航菜单中添加了两个链接，并且为每个链接添加了子菜单。

<div class="nav">
  <div class="nav-item">HOME
    <ul class="sub-menu">
      <li><a href="#">Submenu 1</a></li>
      <li><a href="#">Submenu 2</a></li>
      <li><a href="#">Submenu 3</a></li>
    </ul>
  </div>
  <div class="nav-item">ABOUT US
    <ul class="sub-menu">
      <li><a href="#">Submenu 1</a></li>
      <li><a href="#">Submenu 2</a></li>
      <li><a href="#">Submenu 3</a></li>
    </ul>
  </div>    
</div>

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: #333;
}

.nav-item {
  position: relative;
  color: #fff;
  font-size: 18px;
  margin: 0 20px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.nav-item:hover {
  transform: rotate(360deg);
}

.sub-menu {
  position: absolute;
  top: 30px;
  left: 0;
  display: none;
  background-color: #333;
  min-width: 100px;
}

.nav-item:hover .sub-menu {
  display: block;
}

.sub-menu li {
  list-style: none;
  margin-bottom: 5px;
}

.sub-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  padding: 5px;
  display: block;
}

.sub-menu a:hover {
  background-color: #666;
}

.nav-item::before,
.nav-item::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  box-sizing: border-box;
  transform: rotateY(0);
  transition: transform 0.3s ease;
}

.nav-item::before {
  top: -5px;
  left: 0;
  transform-origin: left;
}

.nav-item::after {
  bottom: -5px;
  right: 0;
  transform-origin: right;
}

.nav-item:hover::before,
.nav-item:hover::after {
  transform: rotateY(180deg);
}

该示例中，我们通过控制 .sub-menu 属性实现了子菜单的显示和隐藏，同时为导航菜单中的每个链接添加了立体的黑色边框和鼠标悬停时旋转的效果。

3.2 示例二

在这个例子中，我们通过给容器元素 .nav 设置 perspective 属性来控制导航菜单的视角位置，让展示的菜单更加立体生动。

<div class="nav">
  <div class="nav-item">HOME</div>
  <div class="nav-item">ABOUT US</div>
  <div class="nav-item">CONTACT US</div>
  <div class="nav-item">SERVICES</div>
  <div class="nav-item">PROJECTS</div>
</div>

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: #333;
  perspective: 800px;
}

.nav-item {
  position: relative;
  color: #fff;
  font-size: 18px;
  margin: 0 20px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.nav-item:hover {
  transform: rotateY(-90deg);
}

.nav-item::before,
.nav-item::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  box-sizing: border-box;
  transform: rotateY(0);
  transition: transform 0.3s ease;
}

.nav-item::before {
  top: -5px;
  left: 0;
  transform-origin: left;
}

.nav-item::after {
  bottom: -5px;
  right: 0;
  transform-origin: right;
}

.nav-item:hover::before,
.nav-item:hover::after {
  transform: rotateY(180deg);
}

该示例通过设置 .nav 容器的 perspective 属性，控制导航菜单的视角位置，进一步增强立体感。同时，我们通过对链接元素 .nav-item 进行 transform: rotateY(-90deg); 的操作将链接旋转 90 度，呈现出更生动的立体效果。同样地，我们也为链接添加了立体的黑色边框和鼠标悬停时旋转的效果。

4. 总结

通过以上的两个示例，我们可以看到如何通过控制 transform 和 perspective 等属性来实现具有立体感的 CSS 导航菜单，进一步提升了网页的视觉效果和用户体验。