Is there a way to use CSS -transform and not affect children elements

Question

I created a mockup to demonstrate my problem. I fear the solution falls in what I did with the first example (box1).

Just not sure why I can't apply a css transform to a parent element and avoid applying it to the child element or at least override it.

Let me know if there is a way to get the effect of the first example using the transform property. I don't want the second image to be scaled as well. Just the parent div.

---

Note

I'm trying to use this property to enable GPU acceleration.

Answer 1

Have not played with this in any other browser but the chrome.

But it looks like overflow hidden set on parent element implies resizing inheritance on image.

So if you set overflow auto on the boxes to which animation is applied, it should fix the resizing inheritance.

http://jsfiddle.net/gnrlbzik/5Q8EC/ tests the overflow set to auto, that keeps image dimensions in tact.