我正在尝试创建一个动画六边形菜单。
请看图更好地理解：
六边形形式的汉堡按钮位于中间。
单击它会显示围绕汉堡按钮的三角形。
汉堡图标变成了一个十字，所以当你再次点击它时，一切都会回到原来的位置。
我的解释性图片实际上在一开始就缺少一步。图像的左半部分应该只显示汉堡按钮。
所以我的问题是：
如何使用 HTML、CSS通过jQuery或以其他方式从六边形创建此动画。
你会用什么方法来做到这一点？
@Julian Livin 在中国免费翻译CSS 动画六边形菜单问题。
这是一个示例和演示：
六边形菜单演示
这是
gif六边形的动画效果：六边形菜单的主要功能：
适应性——视规模而定
viewport(vmin)。这可以通过将值更改width/height为百分比来更改（必须保持纵横比，请参见此处）图像（用 标记
<img />）、标题和字幕6个菜单项
六边形轮廓中的动画汉堡包图标
菜单项边框与三角形相关联，因此它们不会重叠。因此，
click只有hover state在实际菜单项为hovered/clicked可以显示在图像、渐变或任何非主要背景上
六边形布局：
CSS3 2d transforms允许您创建三角形skewY()和rotate()菜单项使用类绑定到三角形 -
.tr和.clip，unskewedc.clip和旋转返回绑定到类.content，汉堡包周围的六边形由多边形制成SVG（比使用更容易做并获得更好的结果CSS汉堡图标由
span两个伪元素组成带动画的六边形菜单：
translate()andopacity) 与属性transition-delaytransition-timming-function和三次贝塞尔曲线完成的。translate()和rotate()）并将中心元素的背景淡化为透明颜色来创建的rgba悬停动画：
汉堡的悬停效果是通过对
stroke-dashoffsetSVG 元素上的属性设置动画来实现的<polygon>。3D transforms使用(translateZ()) 和不透明度在悬停时显示项目标题和副标题。图像同时消失使用的技术：
CSSSCSS用和编码，Autoprefixer使其更易于书写、阅读和缩写。您可以 通过单击演示中
CSS的按钮 来查看编译后的 内容（编译后的 CSS 也可在本文末尾找到）Скомпилированный видSVG汉堡包图标周围的六边形HTML用于标记浏览器支持：
IE 11我在、和系统 上测试了这个菜单chrome，并且该菜单在所有这些浏览器中都有效。FFoperaWindowsChrome并使用模糊渲染字体（如由 chrome 制作FF的动画中所见），并倾向于为三角形创建锯齿边gifFFIE 11字体和三角形的质量最好，但它不支持动画SMIL，因此对汉堡六边形没有悬停效果我已经使用 testing
crossbrowser来检查 supportsafari，并且 hex 菜单也适用于这个系统。来自 @web-tiki的CSS 动画六边形菜单答案的松散翻译。
带有 CSS 变量的变体 +
clip-path。这不是所有的功能，它只是一个草图，但我认为这个想法很清楚。UPD：添加了一个按钮并稍微调整了代码。