The effect of other elements when applying CSS transform: scale

Question

I have three divs on the page, all floating side by side. Using the css scale method, I scale the middle div to 0.5. It works well.

The only problem is that scaling a div does not affect the position of other divs. It seems that the scalable div still has an invisible container with the original scale. The desired result is that after scaling, the fields remain unchanged.

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

Is there a neat way to not mess with fields, etc., so that scaling affects the positioning of other divs?

Answer 1

The way CSS 2D transforms work by design, unfortunately.

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

I did it for you here: http://jsfiddle.net/yxYdd/4/

The only change you really need:

.scaleDiv{ width:75px; } 

Which gives the effect you wanted. Isn't that funny? :)