Javascript中的六边形网格[重复]

Question

我一直在寻找六边形网格解决方案，但似乎无法确定一个可行的方法，尽管有很多都接近了。

我希望它与此示例中的完全一样：http://dabblet.com/gist/3952030，因为六边形旋转并定位对我来说非常完美，但在此示例中我无法找到如何缩放/加宽六边形。上面写着/* .866 = sqrt(3)/2 */，但这似乎不能从那里已经存在的值正确计算出来。

我还有另一个示例 https://codepen.io/elbarto84/pen/wrcob，这很好，但是六边形的旋转方式与第一个示例不同。

因此，如果有人可以提供任何帮助：

• 为第一个示例每行添加更多六边形
• 或者旋转六边形，使它们与第一个示例的位置相同

非常感谢:)

谢谢

Answer 1

如果您可以直接旋转整个物体，您可以将transform: rotate(90deg); 应用于.container。除此之外，我没有看到任何简单的方法来解决这个问题（也许从头开始并根据自己的喜好布置六边形，因为它们基本上只是由 3 个不同旋转的块组成）。

/* ----------------------------------------- */

.container {
  width: 1000px;
  line-height: 1.3;
  transform: rotate(90deg);
  transform-origin: 26% 50%;
}

ol.even {
  position: relative;
  left: 5.45455em;
}

ol.odd {
  position: relative;
  margin-top: -6.5%;
  margin-bottom: -6.5%;
}

.hex {
  position: relative;
  margin: 1em auto;
  width: 6em;
  height: 10.2em;
  border-radius: 1em/.5em;
  background: #ccc;
  transform: rotate(-90deg);
  display: inline-block;
  margin-right: 4.61538em;
  transition: all 150ms ease-in-out;
}

.hex:before,
.hex:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}

.hex:before {
  transform: rotate(60deg);
}

.hex:after {
  transform: rotate(-60deg);
}

.hex:hover {
  background: #F58787;
  cursor: pointer;
}

<div class="container">
  <ol class="even">
    <li class='hex'></li>
    <li class='hex'></li>
  </ol>
  <ol class="odd">
    <li class='hex'></li>
    <li class='hex'></li>
    <li class='hex'></li>
  </ol>
  <ol class="even">
    <li class='hex'></li>
    <li class='hex'></li>
  </ol>
</div>