No meio da minha página eu tenho um elemento div com algum conteúdo nele (outros divs, imagens, qualquer coisa).

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

Eu gostaria de escalar esse elemento (conteúdo a escala) e tudo o que é filho. Parece um trabalho para a operação de escala da transformação CSS3. No entanto, o problema é que isso é uma transformação somente na visualização dessa hierarquia de elementos, isso não altera a quantidade de espaço (ou posição) do elemento na página. Em outras palavras, dimensionar esse elemento maior fará com que ele se sobreponha ao texto "antes" e "depois".

Existe uma maneira simples / confiável de dimensionar não apenas a representação visual, mas também a quantidade de espaço ocupado?

Pontos extras para CSS puro sem Javascript. Ainda mais pontos para uma solução que faza coisa certa com outras funções de transformação, como girar e inclinar. Isso não precisa usar a transformação CSS3, mas ela precisa ser suportada em todos os navegadores compatíveis com HTML5 recentes.