如何在父级而不是子级上应用CSS转换？

Question

我正在尝试制作一个等距的JavaScript游戏，我认为对网格使用CSS转换会很好。

   #grid {
      position: absolute;
      width: 800px;
      height: 800px;
      left: 400px;
      -moz-transform: rotate(-45deg) skew(15deg, 15deg);
      -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
      -ms-transform: rotate(-45deg) skew(15deg, 15deg);
      transform: rotate(-45deg) skew(15deg, 15deg);
    }

（到目前为止，请参见此处的工作： http : //jsfiddle.net/8nydh/ ）

建筑物的图像但是我不想变换。 现在，我想就如何实现这一目标提供一些建议。

• 我是否应该更改结构，以便图块是最后一个后代，并且是唯一经过转换的项？ （使设置稍微复杂一些）。
• 有没有一种方法可以“重置”子元素上的CSS转换（而不是反向转换它！）
• 我是否应该通过其他定位方法在网格上方绘制图像？
• 更好的主意？ 完全不同的技术/方法？

Answer 1

您可以对孩子应用完全相反的变换。
http://jsfiddle.net/GCyrillus/ZfqfS/

transform: rotate(-45deg) skew(-15deg, -15deg);

回到

transform: rotate(45deg) skew( 0deg, 0deg);

Answer 2

我知道它的旧问题，但是这个答案可能会对其他人有所帮助。 对于父母

#grid {
      position: absolute;
      width: 800px;
      height: 800px;
      left: 400px;
      -moz-transform: rotate(-45deg) skew(15deg, 15deg);
      -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
      -ms-transform: rotate(-45deg) skew(15deg, 15deg);
      transform: rotate(-45deg) skew(15deg, 15deg);
    }

对于儿童div

#child{     
      -moz-transform: rotate(45deg) skew(-15deg, -15deg);
      -webkit-transform: rotate(45deg) skew(-15deg, -15deg);
      -ms-transform: rotate(45deg) skew(-15deg, -15deg);
      transform: rotate(45deg) skew(-15deg, -15deg);
    }