How to apply CSS transformations on parent but not on child?

Question

I'm trying make an isometric JavaScript game and I thought it would be nice to use CSS transformations for the grid.

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

(see here for work so far: http://jsfiddle.net/8nydh/ )

The images for the buildings however I don't want to transform. Now I would like some advice on how to achieve this.

• Should I alter the structure so the tile is last descendant and the only transformed item? (making the setup slightly more complicated).
• Is there a way to "reset" CSS transformation on the child element (not counter transforming it!)
• Should I just draw the images over the grid by other means of positioning?
• Better ideas? Whole different technique/approach?

Answer 1

you may apply exact opposite transformation to childs.
http://jsfiddle.net/GCyrillus/ZfqfS/

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

back to

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

Answer 2

I know its old question but this answer might help others. For parent

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

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