使用 HTML 和 CSS 正确显示等距图块

Question

我想用 HTML 和 CSS 创建一个简单的等距平铺地图。

图块宽 128 像素，高 64 像素，但其中一些（如下图）包含图形元素，总高度为 128 像素。

在这个简化的示例中，等距平铺地图只有 2x2 平铺，应如下所示：

如何使用 HTML 和 CSS 正确显示这些图块，以便它们具有正确的位置和比例？

请注意，2x2 tilemap 只是一个示例。如果地图是 5x5 瓦片或 25x75 瓦片，该解决方案需要同样有效（或差不多）。无论瓷砖顺序如何，它也需要工作。

到目前为止，我的想法是旋转容器以使其等距，然后以相反方向旋转图块以“补偿”容器的旋转（我更喜欢以它们的方式显示图块绘制）。但我不确定这是正确的方法。位置不正确，图像失真。

你能告诉我我做错了什么吗？

.container {
  width: 256px;
  height: 256px;
  transform: rotateX(60deg) rotateZ(45deg);
  display: flex;
  flex-wrap: wrap;
  background-color: blue;
}

.tile {
  width: 128px;
  transform: rotateX(0deg) rotateZ(-45deg);
}

.grass {
  height: 64px;
  background-image: url("https://i.stack.imgur.com/39MxJ.png");
}

.bush {
  height: 128px;
  background-image: url("https://i.stack.imgur.com/GpNEI.png");
}

<div class="container">
  <div class="tile grass"></div>
  <div class="tile grass"></div>
  <div class="tile bush"></div>
  <div class="tile bush"></div>
</div>

Answer 1

以目前的结构，只是改变一些CSS属性。

我认为不需要使用“转换”属性，这也可以通过display: grid 属性来实现。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  grid-row: span 2;
  grid-auto-flow: dense;
  width: 258px;
  grid-auto-rows: 32px;
  min-height: 140px;
}

.tile {
  width: 128px;
  height: 87px;
}

.tile:first-child,
.bush:last-child {
  grid-column-start: 1;
  grid-column-end: 3;
  width: 100%;
}

.grass {
  background-image: url("https://i.stack.imgur.com/39MxJ.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
}

.bush {
  height: 128px;
  background-image: url("https://i.stack.imgur.com/GpNEI.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
  margin-top: -52px;
}

<div class="container">
  <div class="tile grass"></div>
   <div class="tile bush"></div>
  <div class="tile grass"></div>
  <div class="tile bush"></div>
</div>

这是Codepen 上的工作示例

Answer 2

您必须使用 hit and trial 方法分别重新定位每个图块，如下面的 sn-p： 以下 sn-p 仅用于演示，您可以根据需要重新定位，蓝色是您想要的任何位置

.container {
  width: 256px;
  height: 256px;
  transform: rotateX(60deg) rotateZ(45deg);
  display: flex;
  flex-wrap: wrap;
  background-color: blue;
}

.tile {
  width: 128px;
}
.tile:nth-child(1) {
  transform: translateX(64px) translateY(64px) rotateX(0deg) rotateZ(-45deg);
}

.tile:nth-child(2) {
  transform: translateX(0) translateY(42px) rotateX(0deg) rotateZ(-45deg);
}

.tile:nth-child(3) {
  transform: translateX(16px) translateY(-18px) rotateX(0deg) rotateZ(-45deg);
}

.tile:nth-child(4) {
  transform: translateX(-45px) translateY(-42px) rotateX(0deg) rotateZ(-45deg);
}

.grass {
  height: 64px;
  background-image: url("https://i.stack.imgur.com/39MxJ.png");
}

.bush {
  height: 128px;
  background-image: url("https://i.stack.imgur.com/GpNEI.png");
}

<div class="container">
  <div class="tile grass"></div>
  <div class="tile grass"></div>
  <div class="tile bush"></div>
  <div class="tile bush"></div>
</div>