CSS3トランスフォーメーションを使用してこのタイルを複製する

Question

<div>タグを使用してアイソメトリックタイルエンジンを作成しようとしています。

HTML5のアイソメトリックタイリングエンジンは数多くありますが、文書化されていないか、予想していたものがほとんどです（つまり、ほとんどの人がフリーウェアをダウンロードして開発するように求めています）。私はCSS3でこの画像を複製しようとしている

は：

transform: rotate(deg)にCSSでdiv要素をしようと、私はこのタイルが等辺ではないことに気づいたので、DIVボックスは画像を突破しました：

誰もがこの上でいくつかの光を当てることができますか？

Answer 1

希望します。私もJSFiddleを持っています。

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

<div></div>