Effect other elements while applying CSS transform: scale

Question

I have got three divs on a page, all floating side by side. With the css scale method, I'm scaling the middlemost div to 0.5. This works well.

The only problem is that scaling the div won't effect the position of the other divs. Seems like the scaled div still has an invisible container with the original scale. The desired result is that after scaling, the margins stay the same.

I added an example: http://jsfiddle.net/yxYdd/3/ (In real, the middlemost div is filled with lots of other elements)

Is there a neat way, without messing with margins etc., so that scaling will effect the positioning of other divs?

Answer 1

That's just how CSS 2D transforms work by design, unfortunately.

What you really want to do is avoid using CSS transforms for this example, and instead use another, simpler implementation.

I've done this for you here: http://jsfiddle.net/yxYdd/4/

The only change you really need is:

.scaleDiv{
    width:75px;
}

Which does produce the effect you wanted. Isn't that funny? :)​