如何使用HTML和CSS正确显示等距瓦片（Isometric Tiles）并适配多尺寸地图

原实现存在的问题 #

• 变换补偿缺失：容器应用了rotateX(60deg) rotateZ(45deg)两个变换，瓦片仅反向旋转了Z轴，未抵消rotateX带来的垂直方向拉伸，导致图像变形
• 布局逻辑错误：flex流式布局无法匹配等距网格的错落排列规则，旋转后的容器坐标体系会进一步放大位置偏差
• 缺失层级处理：未设置瓦片的z-index优先级，高度更高的瓦片会出现前后遮挡错误

正确实现方案 #

采用坐标直接映射的方案实现，不需要旋转容器或瓦片，完全避免变形问题，同时天然适配任意尺寸的地图：

核心逻辑 #

等距网格坐标(x,y)转屏幕坐标的固定规则为：

水平偏移 = (x - y) * 瓦片基础宽度 / 2
垂直偏移 = (x + y) * 瓦片基础高度 / 2
层级优先级z-index = x + y，数值越高显示越靠前，自动解决遮挡问题

完整代码 #

/* 基础配置，修改此处参数即可适配不同尺寸的瓦片 */
:root {
  --tile-width: 128px;
  --tile-base-height: 64px;
}

.tile-container {
  position: relative;
  /* 容器尺寸可根据地图大小自定义，此处预留足够空间适配2x2到25x75等规格 */
  width: 1000px;
  height: 1000px;
  margin: 100px auto;
}

.tile {
  position: absolute;
  width: var(--tile-width);
  /* 用x、y变量自动计算位置和层级 */
  left: calc((var(--x) - var(--y)) * var(--tile-width) / 2);
  top: calc((var(--x) + var(--y)) * var(--tile-base-height) / 2);
  z-index: calc(var(--x) + var(--y));
  background-size: cover;
  background-position: center bottom;
}

/* 瓦片样式 */
.tile.grass {
  height: var(--tile-base-height);
  background-image: url("https://i.sstatic.net/39MxJ.png");
}

.tile.bush {
  height: 128px;
  background-image: url("https://i.sstatic.net/GpNEI.png");
}

<div class="tile-container">
  <!-- 2x2网格示例，每个瓦片设置对应的x、y坐标变量即可 -->
  <div class="tile grass" style="--x:0; --y:0"></div>
  <div class="tile grass" style="--x:0; --y:1"></div>
  <div class="tile bush" style="--x:1; --y:0"></div>
  <div class="tile bush" style="--x:1; --y:1"></div>
</div>

适配说明 #

该方案天然支持任意尺寸的地图，不受瓦片排序影响：

• 生成5x5、25x75等任意规格地图时，仅需要给每个瓦片设置对应的--x和--y网格坐标即可，不需要修改CSS逻辑
• 瓦片加载顺序不影响最终显示效果，z-index会自动按照坐标计算层级，高瓦片不会错误遮挡前方的低瓦片

内容的提问来源于stack exchange，提问作者Candleout