Force transformed elements to affect document flow [closed]

Question

I was wondering if there is any way to force transformed elements to affect document flow.

Consider an example like this: [1] http://jsfiddle.net/pmpcanzn/

How can a scaled element interact with the position of the other elements and not overlaps them?

Element seems to maintain their origin space when a transformation (scale, translate) is being applied to them. Is there any hack to change that?

I'm not seeking for a solution without a transform.

Answer 1

I'm afraid it is not possible.

As highlighted by Hashem Qolami, W3 transform rendering docs states:

Transformations do affect the visual rendering, but have no affect on the CSS layout other than affecting overflow.