Преобразование CSS с изменением размера элемента

Я нашел это: ширина/высота после преобразования

и несколько других, но ничего не совсем то, что я ищу. Я хочу, чтобы масштабировать что-то до 50% его размера (с хорошим анимированным переходом, конечно) и изменить макет страницы на новый (визуальный) размер элемента. По-видимому, по умолчанию происходит то, что элемент по-прежнему сохраняет исходный размер в структуре макета и просто рисуется с помощью связанных преобразований.

В основном я хочу, чтобы пользователь нажимал на блок текста (или другой контент), а затем масштабировал этот текст до 50% (или что-то еще) его размера и вставлял его на панели ниже, чтобы указать, что он выбран. Я не хочу 50% пробелов вокруг элемента после его перемещения.

Я попытался переустановить высоту/ширину, но это приводит к тому, что элемент iself должен пройти новый макет, а затем масштаб применяется к новому макету, и это все равно оставляет меня с 50% пробелом после завершения, Мой код для спецификации mozilla (для простоты) выглядит следующим образом:

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

Я действительно надеюсь, что мне не нужно возиться с отрицательными полями или относительным позиционированием, чтобы достичь этого...

Изменить: С момента написания этого я нашел очень похожий вопрос без комментариев и ответов. Он немного отличается, поскольку мне не важно, что это решение html5, я подозреваю, что решение либо не существует, либо находится в CSS/javascript независимо от уровня html.

Масштабировать/масштабировать элемент DOM и пространство, которое он занимает, используя масштаб масштабирования CSS3()

Изменить 2: (другая нерабочая попытка)

Я также пробовал это, но масштабирование и функции перевода, похоже, взаимодействуют таким образом, что конечная позиция невозможна для прогнозирования... и масштабирования до того, как преобразование не будет таким же, как преобразование, а затем масштаб, К сожалению, это не просто вопрос настройки перевода по масштабному коэффициенту...

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

Даже если бы это сработало, приведенное выше все равно потребует, чтобы я сначала переместил элемент в нижней части страницы перед запуском этого кода (чтобы избавиться от пробела), и, кроме того, мне нужно будет пересчитать преобразование, размер... поэтому я не был слишком доволен этой попыткой начать все равно.

Также обратите внимание, что если вы используете scale + trans vs trans + scale выше, результат резко отличается.

Изменить 3: Я выяснил проблемы размещения... преобразования применяются в указанном порядке, а scale(0.5,0.5) существенно изменяет размер пикселя на половину того, из чего он был первоначально (возможно намекая на то, как они реализовали его внутри страны). Если я первый раз переводил, переводя немного меньше/больше, чтобы объяснить изменение положения левого верхнего угла, вызванное масштабом, будет делать трюк, но управление расположением объектов и корректировка преобразований, когда dom изменяется в разумная манера все еще ускользает от меня. Такой тип кажется неправильным, потому что я дрейфую в направлении написания своего менеджера макетов в javascript, чтобы получить этот эффект.

Ответ 1