javascript - 如何在父级而不是子级上应用 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/)

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

• 我是否应该更改结构以使图 block 成为最后的后代并且是唯一经过转换的元素？ (使设置稍微复杂一些)。
• 有没有办法在子元素上“重置”CSS 转换(而不是反向转换它!)
• 我是否应该通过其他定位方式在网格上绘制图像？
• 更好的想法？完全不同的技术/方法？

Answer 1

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

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

回到

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