CSS动画六边形菜单

Question

我正在尝试找出构建动画六边形菜单的最佳方式。请参见以下图像以获得更好的理解：

六边形汉堡按钮位于中心。一旦点击，它就会显示围绕着汉堡按钮的三角形形状。后者转变成一个十字架来反转这个过程并将所有东西隐藏回到开始的状态。

我的图片实际上在一开始缺少一个步骤。第一张图片应该只显示像codepen演示一样的汉堡菜单按钮。

所以我的问题是：

您能否就如何从HTML到CSS通过jQuery和其他方式构建这个六边形菜单动画向我提出建议？您将使用什么技术来实现它？请记住，虽然codepen示例展示简单的图标，但我的则显示出三角形图片，一旦悬停会显示标题和副标题。

- Julian Livin' in China

---

如果我要解决这个问题，我可能会使用<svg>或<canvas>，因为您可以轻松地绘制三角形形状、背景甚至动画效果。 - Vinc199789

你有没有任何代码可以指引你朝着适合你实际代码的方向前进？ - G-Cyrillus

这可能会有所帮助：https://dev59.com/8WAg5IYBdhLWcg3w1t_y#23188768 - web-tiki

现在我正在概念阶段，思考这个新网站应该有哪些特色。所以我想到了一个六边形菜单，带有三角形的扩展。目前为止，我只画出了我想要的特色。我在这里是为了弄清楚如何编写这个概念。 @Web-tiki：感谢您提供的链接，我喜欢这个变体，但那不是我想要的。 - Julian Livin' in China

Answer 1

这是一个六边形菜单的示例和演示：

六边形菜单演示

下面是六边形菜单的动态gif图：

六边形菜单主要特点：

• 响应式，根据视口大小（vmin）调整。可以通过将宽度/高度值更改为百分比（需要保持纵横比，请参阅此处）进行修改
• 图片（使用<img/>标签）、标题和副标题
• 6个菜单项
• 六边形轮廓内有动画汉堡图标
• 菜单项的边界被剪裁成三角形，以便它们不会互相重叠。这样，只有在实际菜单项上悬停/单击时才触发单击事件和悬停状态（IE除外，请参见本文末的浏览器支持）
• 可以显示在图片、渐变或任何非纯色背景上

六边形布局：

• CSS3 2D转换使三角形进行skewY()和rotate()
• 菜单项被剪裁成三角形，使用.tr和.clip剪切，使用.clip取消倾斜并使用.content取消旋转
• 汉堡周围的六边形形状由SVG多边形制作（比使用CSS更易制作且效果更好，请参见第一版）
• 汉堡图标由一个元素和2个伪元素制成

六边形菜单动画特点：

• 三角形按顺序进行过渡（translate()和opacity），使用transition-delay属性
• 用于特定动画的“弹跳效果”是使用transition-timming-function和立方贝塞尔曲线制作的
• 汉堡到十字架动画是通过过渡2个伪元素（translate()和rotate()）以及令中心元素背景逐渐变为透明rgba色实现的

悬停动画：

• The burger hexagon hover effect is created by animating the stroke-dashoffset property of the SVG <polygon> element.
• The menu item titles and subtitles are displayed using 3D transforms (translateZ()) and opacity on hover, and the images are simultaneously faded out.

Technology used:

• CSS is coded with SCSS and Autoprefixer to simplify writing, reading, and shorten the code. Clicking on the "view compiled" button in the demo will display the compiled CSS (also available at the end of this post).
• SVG for the hexagon around the burger.
• HTML for markup.
• Plain JS applies a class change to the container to trigger the featuring animation.

Browser support:

The menu works on IE 11, Chrome, FF, and Opera in Windows systems. Chrome and FF render the font with blur, and FF tends to make jagged sides for triangles.

IE 11 has the best quality output for fonts and triangles but:

• It doesn't support SMIL animations, so it doesn't render the hover effect on the burger hexagon.
• The overflow property for the links is ignored, and the boundaries of the triangles aren't maintained.

I used cross-browser testing to test Safari support, and the hexagon menu works on that system too.

---

For those who made it this far, here is another link to the demo: hexagon menu
And the full code with compiled CSS:

var hexNav = document.getElementById('hexNav');

document.getElementById('menuBtn').onclick = function() {
    var className = ' ' + hexNav.className + ' ';
    if ( ~className.indexOf(' active ') ) {
        hexNav.className = className.replace(' active ', ' ');
    } else {
        hexNav.className += ' active';
    }              
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  background: #E3DFD2;
}

ul {
  list-style-type: none;
}

a, a:hover, a:focus, a:visited {
  text-decoration: none;
}

nav {
  position: relative;
  width: 70vmin;
  height: 70vmin;
  min-width: 500px;
  min-height: 500px;
  margin: 0 auto;
  overflow: hidden;
}

/** MENU BUTTON ******************************************/
#menuBtn {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 10%;
  height: 10%;
  cursor: pointer;
  z-index: 2;
  will-change: transform;
}
#menuBtn svg {
  display: block;
}
#menuBtn:hover svg polygon {
  -webkit-animation: hexHover 0.7s;
          animation: hexHover 0.7s;
}
#menuBtn span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  padding: 8px 0;
  background-clip: content-box;
  background-color: #585247;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: background-color 0.5s;
          transition: background-color 0.5s;
}
#menuBtn span:before, #menuBtn span:after {
  position: absolute;
  background-color: #585247;
  content: '';
  width: 20px;
  height: 2px;
  -webkit-transition: -webkit-transform 0.5s;
          transition: transform 0.5s;
}
#menuBtn span:before {
  top: 0;
}
#menuBtn span:after {
  bottom: 0px;
}

@-webkit-keyframes hexHover {
  0% {
    stroke-dasharray: 0,0,300;
  }
  10% {
    stroke-dasharray: 0,20,300;
  }
  100% {
    stroke-dasharray: 300,20,300;
  }
}

@keyframes hexHover {
  0% {
    stroke-dasharray: 0,0,300;
  }
  10% {
    stroke-dasharray: 0,20,300;
  }
  100% {
    stroke-dasharray: 300,20,300;
  }
}
/** MENU ITEMS *******************************************/
#hex {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0.1) translatez(0);
      -ms-transform: scale(0.1) translatez(0);
          transform: scale(0.1) translatez(0);
  -webkit-transition: -webkit-transform 0.05s 0.5s;
          transition: transform 0.05s 0.5s;
}

.tr {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 34.6%;
  height: 40%;
  -webkit-transform-origin: 0 100%;
      -ms-transform-origin: 0 100%;
          transform-origin: 0 100%;
  overflow: hidden;
  -webkit-transform: skewY(-30deg);
      -ms-transform: skewY(-30deg);
          transform: skewY(-30deg);
  opacity: 0;
}

.tr:nth-child(1) {
  -webkit-transform: rotate(0deg) skewY(-30deg);
      -ms-transform: rotate(0deg) skewY(-30deg);
          transform: rotate(0deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(1) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(1) .content {
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg);
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
  padding-left: 15%;
  -webkit-perspective-origin: 30% 70%;
          perspective-origin: 30% 70%;
}

.active .tr:nth-child(1) {
  -webkit-transform: rotate(0deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(0deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(0deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.05s, -webkit-transform 0.5s 0.05s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.05s, transform 0.5s 0.05s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(2) {
  -webkit-transform: rotate(60deg) skewY(-30deg);
      -ms-transform: rotate(60deg) skewY(-30deg);
          transform: rotate(60deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(2) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(2) .content {
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
  top: -8%;
  left: 6.67%;
  padding-left: 30%;
  -webkit-perspective-origin: 30% 50%;
          perspective-origin: 30% 50%;
}

.active .tr:nth-child(2) {
  -webkit-transform: rotate(60deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(60deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(60deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.1s, -webkit-transform 0.5s 0.1s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.1s, transform 0.5s 0.1s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(3) {
  -webkit-transform: rotate(120deg) skewY(-30deg);
      -ms-transform: rotate(120deg) skewY(-30deg);
          transform: rotate(120deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(3) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(3) .content {
  -webkit-transform: rotate(-150deg);
      -ms-transform: rotate(-150deg);
          transform: rotate(-150deg);
  -webkit-transform-origin: 42.3% 36.5%;
      -ms-transform-origin: 42.3% 36.5%;
          transform-origin: 42.3% 36.5%;
  padding-left: 10%;
  -webkit-perspective-origin: 30% 30%;
          perspective-origin: 30% 30%;
}

.active .tr:nth-child(3) {
  -webkit-transform: rotate(120deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(120deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(120deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.15s, -webkit-transform 0.5s 0.15s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.15s, transform 0.5s 0.15s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(4) {
  -webkit-transform: rotate(180deg) skewY(-30deg);
      -ms-transform: rotate(180deg) skewY(-30deg);
          transform: rotate(180deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(4) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(4) .content {
  -webkit-transform: rotate(-210deg);
      -ms-transform: rotate(-210deg);
          transform: rotate(-210deg);
  -webkit-transform-origin: 65.4% 38.4%;
      -ms-transform-origin: 65.4% 38.4%;
          transform-origin: 65.4% 38.4%;
  padding-left: 30%;
  -webkit-perspective-origin: 70% 30%;
          perspective-origin: 70% 30%;
}

.active .tr:nth-child(4) {
  -webkit-transform: rotate(180deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(180deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(180deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.2s, -webkit-transform 0.5s 0.2s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.2s, transform 0.5s 0.2s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(5) {
  -webkit-transform: rotate(240deg) skewY(-30deg);
      -ms-transform: rotate(240deg) skewY(-30deg);
          transform: rotate(240deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(5) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(5) .content {
  -webkit-transform: rotate(-270deg);
      -ms-transform: rotate(-270deg);
          transform: rotate(-270deg);
  top: -8%;
  left: 6.67%;
  padding-left: 15%;
  -webkit-perspective-origin: 70% 50%;
          perspective-origin: 70% 50%;
}

.active .tr:nth-child(5) {
  -webkit-transform: rotate(240deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(240deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(240deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.25s, -webkit-transform 0.5s 0.25s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.25s, transform 0.5s 0.25s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(6) {
  -webkit-transform: rotate(300deg) skewY(-30deg);
      -ms-transform: rotate(300deg) skewY(-30deg);
          transform: rotate(300deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(6) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(6) .content {
  -webkit-transform: rotate(-330deg);
      -ms-transform: rotate(-330deg);
          transform: rotate(-330deg);
  -webkit-transform-origin: 106.7% 25.2%;
      -ms-transform-origin: 106.7% 25.2%;
          transform-origin: 106.7% 25.2%;
  padding-left: 30%;
  -webkit-perspective-origin: 70% 70%;
          perspective-origin: 70% 70%;
}

.active .tr:nth-child(6) {
  -webkit-transform: rotate(300deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(300deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(300deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.3s, -webkit-transform 0.5s 0.3s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.3s, transform 0.5s 0.3s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(7) {
  -webkit-transform: rotate(360deg) skewY(-30deg);
      -ms-transform: rotate(360deg) skewY(-30deg);
          transform: rotate(360deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(7) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(7) .content {
  -webkit-transform: rotate(-390deg);
      -ms-transform: rotate(-390deg);
          transform: rotate(-390deg);
}

.active .tr:nth-child(7) {
  -webkit-transform: rotate(360deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(360deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(360deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.35s, -webkit-transform 0.5s 0.35s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.35s, transform 0.5s 0.35s cubic-bezier(0, 2.3, 0.8, 1);
}

.clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 116%;
  height: 86.66%;
  overflow: hidden;
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
}

.content {
  position: absolute;
  width: 86.6%;
  height: 116%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  font-size: 2vmin;
  -webkit-perspective: 500px;
          perspective: 500px;
  background: #000;
}
.content img {
  position: absolute;
  top: 0;
  left: -50%;
  right: -50%;
  margin: auto;
  height: 100%;
  z-index: -1;
  -webkit-transition: opacity 0.3s;
          transition: opacity 0.3s;
  pointer-events: none;
}
.content h2, .content p {
  position: absolute;
  width: 60%;
  line-height: 1em;
  color: #fff;
  opacity: 0;
  -webkit-transform: translateZ(-50px);
          transform: translateZ(-50px);
}
.content h2 {
  bottom: 50%;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 2em;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s;
          transition: transform 0.3s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s;
}
.content p {
  position: absolute;
  top: 50%;
  font-size: 1em;
  -webkit-transition: -webkit-transform 0.3s 0.075s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s 0.075s;
          transition: transform 0.3s 0.075s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s 0.075s;
}
.content:hover h2, .content:hover p {
  opacity: 1;
  -webkit-transform: translatez(0);
      -ms-transform: translatez(0);
          transform: translatez(0);
}
.content:hover img {
  opacity: 0.4;
}

.active #menuBtn:hover svg polygon {
  -webkit-animation: none;
          animation: none;
}
.active #menuBtn span {
  background-color: transparent;
}
.active #menuBtn span:before {
  -webkit-transform: translatey(8px) rotate(45deg);
      -ms-transform: translatey(8px) rotate(45deg);
          transform: translatey(8px) rotate(45deg);
}
.active #menuBtn span:after {
  -webkit-transform: translatey(-8px) rotate(-45deg);
      -ms-transform: translatey(-8px) rotate(-45deg);
          transform: translatey(-8px) rotate(-45deg);
}
.active #hex {
  -webkit-transform: scale(0.9) translatez(0);
      -ms-transform: scale(0.9) translatez(0);
          transform: scale(0.9) translatez(0);
  -webkit-transition: none;
          transition: none;
  will-change: transform;
}
.active .tr {
  opacity: 1;
  will-change: transform;
}

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>
<nav id="hexNav">
  <div id="menuBtn">
    <svg viewbox="0 0 100 100">
      <polygon points="50 2 7 26 7 74 50 98 93 74 93 26" fill="none" stroke-width="4" stroke="#585247" stroke-dasharray="0,0,300"/>
    </svg>
    <span></span>
  </div>
  <ul id="hex">
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm8.staticflickr.com/7435/13629508935_62a5ddf8ec_c.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
  </ul>
</nav>

---

这是一个链接到 第一版 的页面。

---

- web-tiki

---

如果你花更多时间改进它，我希望它至少对其他人也有用，这样你的时间就能得到很好的利用。无论如何，我喜欢它，我一定会尝试在我的实际项目中实现它。 - Julian Livin' in China

@Web-tiki：太棒了！你花时间制作这样具有挑战性的动画，真是太好了。非常感谢你的工作！ - Julian Livin' in China

经过多日的时间，我重新访问了这个答案，我很高兴我这样做了。我非常欣赏你工作中所有那些小细节（可惜很多人甚至不会注意到）。谢谢。 - Alvaro Menéndez

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - web-tiki

完全同意Alvaro的最后评论。你使用干净的代码和最佳实践做了如此惊人的工作，非常棒。我是一个正在学习javascript的初学者，我稍后会弄清楚你的代码，幸运的是它很简短 : )。然而，自从HTML5和CSS3开始以来，我没有升级过它们。我知道这很丢人，所以我会好好处理它。你们有推荐任何课程或教程，让我能够理解上面的代码吗？再次感谢这个精美的菜单。 我忘记问了，你是使用在线生成器构建SVG六边形还是一行一行地制作的？ - Julian Livin' in China

Answer 2

好的。我为您制作了一个 fiddle，因为这很有趣且是一种不错的实践（并且对于您未来可能需要的任何内容，我将把它保留下来），您可以使用它来实现您想要的目标。

首先是基本的 HTML：

<div class="container">
    <div class="shape x1"></div>
    <div class="shape x2"></div>
    <div class="shape x3"></div>
    <div class="shape x4"></div>
    <div class="shape x5"></div>
    <div class="shape x6"></div>
    <div class="button">X</a>
</div>

并且易于理解。基本上，在一个相对的容器中，您可以使用绝对定位在每个div中放置三角形。

我已经使用css形状创建了这些三角形，但是建议您在示例中使用普通的形状div来更好地使用带有透明背景的普通图像。然后调整元素的位置直到您得到想要的结果。

因此，我已经使用了共通类形状来获取共通的css属性：

shape {
    width: 0;
    height: 0;
    border-left: 58px solid transparent;
    border-right: 58px solid transparent;
    border-bottom: 100px solid red;
    position:absolute;
    transform-origin: center;
}

然后使用“x”类来将元素定位在正确的位置，就像这个例子:

.x1 {
    transform: rotate(90deg);
    left:0;
    top:50px;    
}

如果您使用三角形图像，则显然忽略旋转。

我把按钮放在了中间。

接下来，需要使用这个非常简单的jQuery：

$(document).ready(function () {
            $('.button').click(function () {
                $('.x1').toggleClass("trans1");
                $('.x2').toggleClass("trans2");
                $('.x3').toggleClass("trans3");
                $('.x4').toggleClass("trans4");
                $('.x5').toggleClass("trans5");
                $('.x6').toggleClass("trans6");
                $('.button').toggleClass("button2")

            });
        });  

当你点击按钮时，它基本上会为每个元素添加和删除类。现在，你只需要使用新的类来重新定位元素并创建所需的效果...使用按钮的新类（例如）更改按钮的背景图像（汉堡变成叉），然后添加一个简单的过渡效果：

transition: all 1s linear;

这里有一个FIDDLE链接：http://jsfiddle.net/alvaromenendez/xg1sv6yw/2/。希望这能对你的项目有所帮助。

编辑：如果你想让元素通过过渡效果“关闭”，请将属性添加到原始类中，而不是jquery创建的类中。（我只是更喜欢这样）

- Alvaro Menéndez

---

抱歉，Alvaro，但这里有两个主要缺陷：元素彼此重叠（因此点击区域也是如此），而且您无法在边框上应用背景图像。 - MacK

抱歉，马克，但正如我在答案中明确指出的那样，这基本上是为了展示如何制作动画，我明确建议将形状制作为带有透明背景的图像，或者更好但对于刚开始的人来说更加复杂，使用SVG。无论如何，感谢您的投票（实际上是当答案不有用时）。如果您认为那样可以，那对我来说也没问题。 - Alvaro Menéndez

答案完全没有用，因为它会让试图根据你的答案解决这个问题的人完全迷失方向，从而产生更多的问题。正如我所说，点击区域会重叠，并且使用透明的三角形图像不允许您在三角形元素本身内部拥有标题和副标题，正如这个问题的最后一段所要求的那样。（除非使用另一个悬停图像，这很糟糕，因为您无法在悬停时使用CSS3效果，对SEO非常不利，并且如果您想更改文本/错别字/重新排列菜单，则非常糟糕） - MacK

继续说：我认为动画本身很可爱，而且我知道你正在屏幕上呈现一个100％跨浏览器兼容的元素，但是让我们这样说：他要求一份比萨饼，而你给了他一个蛋糕。虽然它有相同的形状，但你不能在蛋糕里放番茄酱和意大利腊肠，而所有在他之后来的人都会按照你的食谱制作，以为他们会得到一份比萨饼，但最终他们会得到一块味道非常奇怪的蛋糕。 - MacK

谢谢，伙计，这是一个不错的变体！我明白Alvaro在说什么。我必须能够在每个三角形中放置带有标题+副标题的图片。Web-tiki在实现所有这些方面做得很好。然而，它并不完全跨浏览器，因为它使用纯CSS，而在你的情况下，它使用了JavaScript，我宁愿使用后者。 - Julian Livin' in China

很高兴知道该操作员并不认为我的答案“完全没有用”。不像其他人仍然试图通过详细解释来证明“快速触发”的负评是为什么一个答案不是完美的（当然，他们自己并没有提供任何解决方案）。 - Alvaro Menéndez

Answer 3

希望这对某些人有所帮助。下面是一个带有工作示例的代码片段https://codepen.io/jaygriggs/pen/zYpaKBY。

nav {
  position: relative;
  width: 70vmin;
  height: 70vmin;
  min-width: 500px;
  min-height: 500px;
  margin: 0 auto;
  overflow: hidden;
}

/** MENU BUTTON ******************************************/
#menuBtn {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 10%;
  height: 10%;
  z-index: 2;
  
}
#menuBtn svg {
  display: block;
}
#menuBtn svg polygon:hover {
  -webkit-animation: hexHover 0.7s;
          animation: hexHover 0.7s;
  cursor: pointer;
}
#menuBtn span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  padding: 8px 0;
  background-clip: content-box;
  background-color: #585247;
  transform: translate(-50%, -50%);
  transition: background-color 0.3s;
  pointer-events: none;
}
#menuBtn span:before, #menuBtn span:after {
  position: absolute;
  background-color: #585247;
  content: '';
  width: 20px;
  height: 2px;
  transition: transform 0.3s;
}
#menuBtn span:before {
  top: 0;
}
#menuBtn span:after {
  bottom: 0px;
}

- Jay Griggs