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

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

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

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

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

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

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

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

Редактировать 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 ; 
}

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

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

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