Question

我一直在四处寻找六边形网格解决方案，并且看起来似乎无法确定一个有效的方法，尽管有很多接近。

我希望它与这个例子中的那个完全一样：http://dabblet.com/gist/3952030因为六边形旋转并且定位对我来说很合适，但是在这个例子中我找不到如何缩放/宽度六边形。它显示/* .866 = sqrt(3)/2 */，但似乎无法从已存在的值中正确计算。

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

所以如果有人可以提供帮助：

第一个示例
或旋转六边形，使它们与第一个示例处于相同的位置

我非常感谢:)。

由于

Answer 1

如果你只是旋转整个事情就可以了，你可以将transform: rotate(90deg);应用到.container。除此之外，我没有看到任何简单的方法（可能从头开始并根据自己的喜好布置六边形，因为它们基本上只是由3个不同旋转的块组成）。

＆＃13;

/* ----------------------------------------- */

.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;
}

＆＃13;

<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>

＆＃13;

Javascript中的六边形网格

1 个答案: