Javascript HTML对角线网格-用于游戏

我正在尝试用HTML和Javascript创建一个鸟瞰游戏。
我发现了一个JSFIDLE示例，它与我想使用CSS transform实现的类似：

transform:rotate（-45度）



我看到的唯一问题是：

1.我希望鸟瞰图呈一定角度，而不是直接向下。

2.游戏视图将基于一个村庄，该村庄可以扩展到所有4个侧面（顶部、左侧、右侧、底部）。对于普通表（使用x和y坐标），我希望将表扩展到负坐标将是一个问题。我认为最好的解决方案是将所有内容都放在HTML画布中，但是我不确定画布是否会导致透视问题，甚至不知道如何创建画布来为游戏工作

是否有人有任何资源，或者有人能告诉我实现我想要的目标的最佳途径是什么？
CSS透视图可能会帮助您，请查看此页面。此页面还包含对“等距”而非“对角网格”的通俗搜索。这里有一个很好的例子：@DavorMlinaric您的代码笔缺少非webkit属性。这并不是说我没有Chrome，但在让人们使用默认浏览器查看您的代码笔之前，您可能会发出警告，并得出结论认为它没有任何作用。@MrLister是的，没错。。。我的错。我没有检查代码，以前发现过一次这个例子，所以我分享了它，因为它看起来像他需要的东西。