使用CSS3 Tranformations复制此tile

Question

我正在尝试使用<div>标签创建等距磁贴引擎。

我已经看过HTML5的众多等距平铺引擎，但它们要么记录不好也不是我所期望的（即大多数要求我下载免费软件进行开发）。

我试图在CSS3中复制此图片：

在CSS中尝试transform: rotate(deg) div时，我注意到这个图块不是等边的，所以div框超过了图像：

有人可以对此有所了解吗？

Answer 1

希望这会有所帮助。我也有一个JSFiddle。

div {
  background: #dedede;
  width: 50px;
  height:50px;
  margin: 20px;
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
}

<div></div>