En el medio de mi página tengo un elemento div con algo de contenido (otros divs, imágenes, lo que sea).

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

Me gustaría escalar ese elemento (contenido a escala) y todo es niños. Parece un trabajo para la operación de escala de transformación de CSS3. Sin embargo, el problema es que esto es una transformación en la visualización de la jerarquía de ese elemento solamente, no cambia la cantidad de espacio (o posición) del elemento en la página. En otras palabras, escalar ese elemento más grande hará que se superponga con el texto "antes" y "después".

¿Existe una forma simple / confiable de escalar no solo la representación visual, sino también la cantidad de espacio ocupado?

Puntos extra para CSS puro sin Javascript. Aún más puntos para una solución que sí lo hace.Lo correcto Con otras funciones de transformación como rotar y sesgar. Esto no tiene que usar la transformación CSS3, pero sí es compatible con todos los navegadores recientes compatibles con HTML5.