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

и несколько других, но ничего не совсем то, что я ищу. То, что я хочу, это масштабировать что-то до 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>

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

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

Масштабировать / масштабировать элемент DOM и занимаемое им пространство с помощью CSS3 transform scale ()

Edit 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 противtrans + scale выше результат резко отличается.

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