css3利用transform变形结合事件完成扇形导航

下面是关于如何利用 CSS3 transform 变形结合事件完成扇形导航的完整攻略，包含两个示例说明。

理解扇形导航

在开始之前，我们需要了解什么是扇形导航。顾名思义，它就是呈扇形展开的导航菜单。这种菜单通常被用于展示较多的导航选项，因为它可以充分利用页面空间，更好地呈现导航选项。

CSS3 transform 变形

扇形导航的实现需要用到 CSS3 transform 变形。transform 属性可以改变 HTML 元素的形状，大小和位置。

转换原点

在使用 transform 时，需要特别注意元素的变形原点（transform-origin）。默认情况下，元素的变形原点在元素的中心点上。可以使用 transform-origin 属性来指定元素的变形原点。

.element {
  transform-origin: 50% 50%;
  /*或者以下语句*/
  transform-origin: center center;
}

如果将元素的变形原点设置到角上，就可以实现扇形导航的效果。

旋转元素

旋转元素是实现扇形导航效果的重要步骤。使用 transform 属性中的 rotate() 方法，可以将 HTML 元素沿其中心点旋转一定的角度。例如，下面的代码可以将一个元素顺时针旋转 45 度：

.element {
  transform: rotate(45deg);
}

扇形设置

如果我们想要呈现出扇形的效果，需要使用裁剪（clip）和旋转的组合。代码如下：

/* 设置扇形的起始角度是135度
   结束角度是45度，
   扇形半径为50px */
.element {
  clip: rect(0, 50px, 50px, 0);
  transform: rotate(135deg);
}

clip 属性用于剪裁元素，rect() 函数的四个参数分别代表上、右、下、左四个边的距离。如上代码，代表把元素的右和下两个边距离元素边界的距离都设置成 50px。

支持事件

要让扇形导航成为一个可点击的导航菜单，需要用 JavaScript 来为每个菜单项绑定事件。下面给出两个示例代码。

示例一

这个示例展示如何制作一个四段扇形菜单，每个扇形上有一个图标和一个文字，可以通过鼠标移入每个扇形上方，显示对应的菜单项。

HTML：

<div class="sector-nav">
  <a href="#">
    <i class="fa fa-home"></i>
    <span>主页</span>
  </a>
  <a href="#">
    <i class="fa fa-paper-plane"></i>
    <span>消息</span>
  </a>
  <a href="#">
    <i class="fa fa-bell"></i>
    <span>通知</span>
  </a>
  <a href="#">
    <i class="fa fa-user"></i>
    <span>个人中心</span>
  </a>
</div>

CSS：

.sector-nav {
  width: 200px;
  height: 200px;
  position: relative;
}

.sector-nav a {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0 0 0 50%;
  transform-origin: left top;
}

.sector-nav a:hover {
  z-index: 2;
  transform: rotate(0deg) scale(2);
}

.sector-nav a:nth-child(1) {
  transform: rotate(45deg);
}

.sector-nav a:nth-child(2) {
  transform: rotate(135deg);
}

.sector-nav a:nth-child(3) {
  transform: rotate(-135deg);
}

.sector-nav a:nth-child(4) {
  transform: rotate(-45deg);
}

.sector-nav a i {
  font-size: 40px;
  display: inline-block;
  margin-bottom: 10px;
}

.sector-nav a span {
  display: block;
}

.sector-nav a:nth-child(1) i {
  color: #ff9800;
}

.sector-nav a:nth-child(2) i {
  color: #2196f3;
}

.sector-nav a:nth-child(3) i {
  color: #00bcd4;
}

.sector-nav a:nth-child(4) i {
  color: #4caf50;
}

JS：

const navItems = document.querySelectorAll('.sector-nav a');
navItems.forEach(item => {
  item.addEventListener('mouseenter', () => {
    item.style.transform = 'rotate(0) scale(2)';
  });
  item.addEventListener('mouseleave', () => {
    item.style.transform = '';
  });
});

示例二

用 jQuery 实现一个五段扇形菜单，每个扇形上有一张图片和一个标题，可以通过鼠标移入每个扇形上方，显示对应的文字和半透明的遮罩。

HTML：

<div class="sector-wrap">
  <div class="sector">
    <a href="#">
      <img src="images/1.jpg" alt="">
      <h2>马来西亚</h2>
    </a>
    <a href="#">
      <img src="images/2.jpg" alt="">
      <h2>新加坡</h2>
    </a>
    <a href="#">
      <img src="images/3.jpg" alt="">
      <h2>泰国</h2>
    </a>
    <a href="#">
      <img src="images/4.jpg" alt="">
      <h2>印尼</h2>
    </a>
    <a href="#">
      <img src="images/5.jpg" alt="">
      <h2>菲律宾</h2>
    </a>
  </div>
</div>

CSS：

.sector-wrap {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  position: relative;
}

.sector {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.sector a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  text-align: center;
  transition: all 0.2s ease-in-out;
  transform-origin: left top;
}

.sector a:hover {
  transform: rotate(0) scale(1.5);
  z-index: 2;
}

.sector a img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.sector a h2 {
  display: block;
  font-size: 16px;
  margin-top: 8px;
  margin-bottom: 0;
}

.sector a .mask {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.sector a:hover .mask {
  opacity: 1;
}

.sector a:hover h2 {
  opacity: 0;
}

JS：

$('.sector a').hover(function() {
  $(this).find('.mask').css('opacity', 1);
  $(this).find('h2').css('opacity', 0);
}, function() {
  $(this).find('.mask').css('opacity', 0);
  $(this).find('h2').css('opacity', 1);
});

以上就是两个扇形导航的示例代码和实现细节。希望对你有所帮助！