html - 使用 CSS3 转换复制此图 block

Question

我正在尝试使用 <div> 创建一个等距图 block 引擎标签。

我见过许多用于 HTML5 的等距平铺引擎，但它们要么没有很好的文档记录，也没有达到我的预期(即大多数人要求我下载免费软件进行开发)。

我试图在 CSS3 中复制这张图片:

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

任何人都可以阐明这一点吗？

Answer 1

希望这对您有所帮助。我还有一个 JSFiddle .

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

<div></div>