Encontré esto:ancho / alto después de la transformación

y varios otros, pero nada es lo que estoy buscando. Lo que quiero es escalar algo al 50% de su tamaño (con una buena transición animada, por supuesto) y hacer que el diseño de la página se reajuste al nuevo tamaño (visual) del elemento. Lo que parece suceder de manera predeterminada es que el elemento aún conserva su tamaño original en la estructura del diseño, y simplemente se dibuja con las transformaciones asociadas.

Básicamente, quiero que el usuario haga clic en un bloque de texto (u otro contenido), y luego escale ese texto al 50% (o lo que sea) de su tamaño y lo pegue en el panel de abajo para indicar que se ha seleccionado. No quiero 50% de espacio en blanco alrededor del elemento después de moverlo.

He intentado restablecer la altura / anchura, pero eso hace que el elemento se someta a un nuevo diseño y luego la escala se aplique al nuevo diseño, lo que me deja con un 50% de espacio en blanco después de que todo haya terminado. Mi código específico de mozilla (por simplicidad) se ve así:

<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>

Realmente espero no tener que meterme con márgenes negativos o posicionamiento relativo para lograr esto ...

Editar: Desde que escribí esto encontré una pregunta muy similar sin comentarios ni respuestas. Difiere ligeramente, ya que no me importa si es una solución específica de html5, sospecho que la solución no existe o se encuentra en CSS / javascript independientemente del nivel de html.

Escale / amplíe un elemento DOM y el espacio que ocupa usando la escala de transformación CSS3 ()

Edición 2: (otro intento que no funciona)

También he intentado esto, pero la escala y las funciones de traducción parecen interactuar de una manera que hace que la posición final sea imposible de predecir ... y la escala antes de la transformación no parece ser la misma que la transformación y luego la escala. Desafortunadamente, no es solo una cuestión de ajustar la conversión por el factor 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 ; 
}

Incluso si funcionara, lo anterior aún me obligaría a mover primero el elemento a la parte inferior de la página antes de ejecutar este código (para deshacerme del espacio en blanco), y además, tendría que volver a calcular la transformación en el nuevo tamaño. . así que no estaba muy contento con este intento de comenzar de todos modos.

También tenga en cuenta que si usascale + trans vstrans + scale Por encima del resultado es drásticamente diferente.

Edición 3: Descubrí los problemas de colocación ... las transformaciones se aplican en el orden especificado, yscale(0.5,0.5) esencialmente cambia el tamaño de un píxel a la mitad de lo que era originalmente (probablemente insinúa cómo lo implementaron internamente). Si puse traducir es lo primero, traducir un poco menos / más para explicar el cambio en la posición de la esquina superior izquierda causado por la escala hará el truco, pero administrar la ubicación de los objetos y ajustar las transformaciones cuando el domo cambie en un La manera razonable todavía me está eludiendo. Este tipo de sentimiento se siente mal porque me estoy desviando en la dirección de escribir mi propio administrador de diseño en javascript para obtener este efecto.