我想用HTML和CSS创建一个简单的等距tilemap。

瓷砖宽128px，高64px，但其中一些瓷砖（如下面的瓷砖）包含图形元素，使其总高度为128px。

在这个简化的示例中，等距tilemap只有2x2块，应该如下所示:

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

请注意2x2 tilemap只是一个示例。如果映射是5x5块或25x75块，解决方案需要同样好（或差不多）工作。无论平铺顺序如何，它都需要工作。

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

你知道我做错了什么吗？

顺晟科技：

使用当前结构，只需更改一些CSS属性。

我认为不需要使用“Transform”属性，这也可以通过该属性实现。

以下是codepen

您必须使用以下片段中的hit和trial方法分别重新定位每个瓷砖： 下面的代码片段仅用于演示，您可以根据需要重新定位，任何您想要蓝色的地方都