1

我正在尝试制作一个等距的 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转换（而不是反转换它！）
  • 我应该通过其他定位方式在网格上绘制图像吗？
  • 更好的想法？完全不同的技术/方法？
4

2 回答 2

0

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

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

回到

transform: rotate(45deg) skew( 0deg, 0deg);
于 2013-06-02T17:10:26.603 回答
0

我知道它的老问题，但这个答案可能对其他人有所帮助。给家长

#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);
    }
于 2013-09-07T03:45:34.047 回答