如何在父級而不是子級上應用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);
    }