In der Mitte meiner Seite habe ich ein div-Element mit etwas Inhalt (andere divs, Bilder, was auch immer).

<div>
    before
</div>
<div id="content-to-scale">
    <div>something inside</div>
    <div>another something</div>
</div>
<div>
    after
</div>

Ich möchte dieses Element (inhaltlich maßstabsgetreu) und alle seine Kinder skalieren. Scheint ein Job für die Skalierungsoperation der CSS3-Transformation zu sein. Das Problem ist jedoch, dass dies nur eine Transformation der Visualisierung dieser Elementhierarchie ist und nicht die Größe des Speicherplatzes (oder der Position) des Elements auf der Seite ändert. Mit anderen Worten, wenn Sie das Element größer skalieren, überlappt es mit dem Text "Vorher" und "Nachher".

Gibt es eine einfache / zuverlässige Möglichkeit, nicht nur die visuelle Darstellung, sondern auch den belegten Platz zu skalieren?

Extra Punkte für reines CSS ohne Javascript. Noch mehr Punkte für eine Lösung, die es schafftdas Richtige mit anderen Transformationsfunktionen wie Drehen und Neigen. Hierfür muss keine CSS3-Transformation verwendet werden, sie muss jedoch in allen aktuellen HTML5-fähigen Browsern unterstützt werden.