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);
    }

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

2 个答案: