Eu achei isto:largura / altura após transformação

e vários outros, mas nada não é bem o que estou procurando. O que eu quero é escalar algo para 50% do tamanho (com boa transição animada, é claro) e fazer com que o layout da página seja reajustado ao novo tamanho (visual) do elemento. O que parece acontecer por padrão é que o elemento ainda retém seu tamanho original na estrutura do layout e é simplesmente desenhado com as transformações associadas.

Basicamente eu quero que o usuário clique em um bloco de texto (ou outro conteúdo) e, em seguida, dimensione o texto para 50% (ou qualquer outro) do tamanho e coloque-o em um painel abaixo para indicar que ele foi selecionado. Eu não quero 50% de espaço em branco ao redor do elemento depois de movê-lo.

Eu tentei re-definir a altura / largura, mas isso faz com que o elemento seja submetido a um novo layout e, em seguida, a escala é aplicada ao novo layout e isso ainda me deixa com 50% de espaço em branco depois de tudo ter terminado. Meu código específico mozilla (por simplicidade) se parece com isto:

<script type="text/javascript">
 function zap(e) {

  var height = e.parentNode.offsetHeight/2 + 'px';
  var width = e.parentNode.offsetWidth/2 + 'px';
  e.parentNode.style.MozTransform='scale(0.0)'; 
  e.parentNode.addEventListener(
    'transitionend', 
    function() { 
      var selectionsArea = document.getElementById("selected");
      selectionsArea.appendChild(e.parentNode);
      e.parentNode.style.MozTransform='scale(0.5,0.5)'; 
      e.parentNode.style.display = 'inline-block';
      e.parentNode.style.height = height;
      e.parentNode.style.width = width;
    },
    true) 
}
</script>

Eu estou realmente esperando que eu não tenha que mexer com margens negativas ou posicionamento relativo para conseguir isso ...

Editar: Desde que escrevi isso, encontrei uma pergunta muito semelhante, sem comentários ou respostas. Isso é um pouco diferente, já que não me importo em ser uma solução específica para html5, suspeito que a solução não exista ou esteja em CSS / javascript, independentemente do nível de HTML.

Escala / zoom de um elemento DOM e o espaço que ocupa usando escala de transformação CSS3 ()

Editar 2: (outra tentativa não funcional)

Eu também tentei isso, mas a escala e as funções de tradução parecem interagir de uma maneira que torna a posição final impossível de prever ... e escalar antes de transformar não parece ser o mesmo que transformar em escala. Infelizmente não é apenas uma questão de ajustar a tradução pelo fator de escala ...

function posX(e) {
    return e.offsetLeft + (e.offsetParent ? posX(e.offsetParent) : 0)
}

function posY(e) {
    return e.offsetTop + (e.offsetParent ? posY(e.offsetParent) : 0)
}

function placeThumbNail(e, container, x, y, scale) {
    var contX = posX(container);
    var contY = posY(container);
    var eX = posX(e);
    var eY = posY(e);
    var eW = e.offsetWidth;
    var eH = e.offsetHeight;

    var margin = 10;
    var dx = ((contX - eX) + margin + (x * eW * scale));
    var dy = ((contY - eY) + margin + (y * eH * scale));

    // assumes identical objects     
    var trans = 'translate(' + dx + 'px, ' + dy + 'px) ';
    var scale = 'scale(' + scale + ',' + scale + ') ';
    e.style.MozTransform =  trans + scale ; 
}

Mesmo que funcionasse, o acima ainda exigiria que eu movesse primeiro o elemento para a parte inferior da página antes de executar este código (para me livrar do espaço em branco), e além disso eu precisaria recalcular a transformação em redimensionar .. então eu não estava muito feliz com essa tentativa de começar de qualquer maneira.

Observe também que, se você usarscale + trans vstrans + scale acima do resultado é drasticamente diferente.

Editar 3: Eu descobri os problemas de posicionamento ... as transformações são aplicadas na ordem especificada escale(0.5,0.5) essencialmente altera o tamanho de um pixel para metade do que era originalmente (provavelmente insinuando como eles o implementaram internamente). Se eu colocar translate é primeiro, traduzir um pouco menos / mais para explicar a mudança na posição do canto superior esquerdo causada pela escala fará o truque, mas gerenciando a localização dos objetos e ajustando as transformações quando o dom muda em um maneira razoável ainda me ilude. Esse tipo de coisa parece errada porque estou à deriva na direção de escrever meu próprio gerenciador de layout em javascript apenas para obter esse efeito.