使用CSS3转换复制此瓷砖转换

2017-09-26 25 views 2 likes

我正在尝试创建一个使用<div>标签的等轴测图瓷砖引擎。我已经看到了许多用于HTML5的等距平铺引擎，但是它们要么记录不准确，要么我期望它们是（即大多数要求我下载免费软件以进行开发）。使用CSS3转换复制此瓷砖转换

我想在CSS3复制这一形象：

当试图transform: rotate(deg)在CSS一个div，我发现这砖是不是等边，所以在div盒子超越图像：

谁能一些线索呢？

来源

2017-09-26 Connor Simpson

如果你打算填补这些瓷砖的一些内容，旋转可能是一个问题。可能是更好地使用一些图像与阿尔法通道（PNG）作为常规股利背景没有任何旋转？ –

回答

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

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

<div></div>

来源

2017-09-26 19:56:29

这是我问的完美代表。谢谢。 –

使用CSS3转换复制此瓷砖转换

回答

相关问题