Znalazłem to:szerokość / wysokość po transformacji

i kilka innych, ale nic nie jest całkiem tym, czego szukam. Chcę skalować coś do 50% jego rozmiaru (oczywiście z ładnym animowanym przejściem) i dopasować układ strony do nowego (wizualnego) rozmiaru elementu. Domyślnie zdarza się, że element nadal zachowuje swój pierwotny rozmiar w strukturze układu i jest jedynie rysowany za pomocą powiązanych transformacji.

Zasadniczo chcę, aby użytkownik kliknął blok tekstu (lub innej treści), a następnie skalował ten tekst do 50% (lub cokolwiek) tego rozmiaru i umieścił go w panelu poniżej, aby wskazać, że został wybrany. Po przeniesieniu nie chcę 50% białych znaków wokół elementu.

Próbowałem ponownie ustawić wysokość / szerokość, ale to powoduje, że element sam przechodzi nowy układ, a następnie skala jest stosowana do nowego układu, a to wciąż pozostawia mi 50% białej przestrzeni po zakończeniu. Mój specyficzny dla Mozilli kod (dla uproszczenia) wygląda tak:

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

Naprawdę mam nadzieję, że nie muszę wpadać w bałagan z negatywnymi marżami lub pozycjonowaniem względnym, aby to osiągnąć ...

Edytować: Od czasu napisania tego tekstu znalazłem bardzo podobne pytanie bez komentarzy i odpowiedzi. Różni się nieznacznie, ponieważ nie obchodzi mnie to, że jest to rozwiązanie specyficzne dla HTML5, podejrzewam, że rozwiązanie albo nie istnieje, albo leży w CSS / javascript niezależnie od poziomu HTML.

Skaluj / powiększ element DOM i zajmowane miejsce za pomocą skali transformacji CSS3 ()

Edytuj 2: (kolejna niepracująca próba)

Próbowałem również tego, ale skala i funkcje translacji wydają się oddziaływać w sposób, który uniemożliwia przewidzenie ostatecznej pozycji ... i skala przed transformacją nie wydaje się być taka sama jak transformacja, a następnie skala. Niestety, nie chodzi tylko o dostosowanie tłumaczenia przez współczynnik skali ...

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

Nawet jeśli zadziałałoby, powyższe wymagałoby ode mnie najpierw przeniesienia elementu na dół strony przed uruchomieniem tego kodu (aby pozbyć się białych znaków), a ponadto musiałbym ponownie obliczyć transformację po ponownym zmianie rozmiaru. , więc i tak nie byłem zbyt zadowolony z tej próby rozpoczęcia.

Zauważ również, że jeśli używaszscale + trans vstrans + scale powyżej wynik jest drastycznie inny.

Edytuj 3: Zorientowałem się, że problemy z rozmieszczeniem ... transformacje są stosowane w określonej kolejności iscale(0.5,0.5) zasadniczo zmienia rozmiar piksela na połowę tego, co pierwotnie (prawdopodobnie sugerując, jak zaimplementowano go wewnętrznie). Jeśli umieściłem tłumaczenie jako pierwsze, przetłumaczenie nieco mniej / więcej, aby uwzględnić zmianę położenia lewego górnego rogu spowodowane skalą, załatwi sprawę, ale zarządzanie lokalizacją obiektów i dostosowanie transformacji, gdy dom zmieni się w rozsądny sposób wciąż mi umyka. Ten rodzaj błędów jest błędny, ponieważ dryfuję w kierunku pisania własnego menedżera układu w javascript, aby uzyskać ten efekt.