Ich habe das gefunden:Breite / Höhe nach der Transformation

und einige andere, aber nichts ist nicht ganz das, wonach ich suche. Ich möchte, dass etwas auf 50% seiner Größe skaliert wird (mit natürlich schön animiertem Übergang) und das Seitenlayout an die neue (visuelle) Größe des Elements angepasst wird. Standardmäßig scheint das Element seine ursprüngliche Größe in der Layoutstruktur beizubehalten und wird lediglich mit den zugehörigen Transformationen gezeichnet.

Grundsätzlich möchte ich, dass der Benutzer auf einen Textblock (oder einen anderen Inhalt) klickt, diesen Text dann auf 50% (oder was auch immer) seiner Größe skaliert und in ein Feld darunter klebt, um anzuzeigen, dass er ausgewählt wurde. Ich möchte keine 50% Leerzeichen um das Element, nachdem ich es verschoben habe.

Ich habe versucht, die Höhe / Breite neu einzustellen, aber dies führt dazu, dass das Element selbst ein neues Layout erhält und dann die Skalierung auf das neue Layout angewendet wird. Dadurch verbleiben immer noch 50% Leerraum, nachdem alles fertig ist. Mein Mozilla-spezifischer Code sieht (der Einfachheit halber) so aus:

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

Ich hoffe wirklich, dass ich mich nicht mit negativen Margen oder relativen Positionen herumschlagen muss, um dies zu erreichen ...

Bearbeiten: Seit ich das geschrieben habe, habe ich eine sehr ähnliche Frage gefunden, ohne Kommentare oder Antworten. Es unterscheidet sich geringfügig, da es mir egal ist, ob es sich um eine HTML5-spezifische Lösung handelt. Ich vermute, dass die Lösung entweder nicht existiert oder in CSS / Javascript liegt, unabhängig von der HTML-Ebene.

Skalieren / Zoomen eines DOM-Elements und des von ihm belegten Platzes mithilfe der CSS3-Transformation scale ()

Bearbeiten 2: (Ein weiterer Versuch, nicht zu arbeiten)

Ich habe es auch versucht, aber die Skalierungs- und die Umsetzungsfunktion scheinen auf eine Weise zu interagieren, die es unmöglich macht, die endgültige Position vorherzusagen. Leider geht es nicht nur darum, die Übersetzung um den Skalierungsfaktor anzupassen ...

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

Selbst wenn es funktionieren würde, würde das obige immer noch erfordern, dass ich das Element zuerst an das Ende der Seite verschiebe, bevor ich diesen Code ausführe (um das Leerzeichen zu entfernen), und außerdem müsste ich die Transformation bei Größenänderung neu berechnen. Ich war also mit diesem Versuch, trotzdem anzufangen, nicht allzu glücklich.

Beachten Sie auch, dass, wenn Sie verwendenscale + trans vstrans + scale oben ist das Ergebnis drastisch anders.

Edit 3: Ich habe die Platzierungsprobleme herausgefunden. Die Transformationen werden in der angegebenen Reihenfolge angewendetscale(0.5,0.5) Ändert im Wesentlichen die Größe eines Pixels auf die Hälfte dessen, was es ursprünglich war (was wahrscheinlich darauf hindeutet, wie es intern implementiert wurde). Wenn ich zuerst übersetzen möchte, reicht es aus, wenn Sie etwas weniger / mehr übersetzen, um die durch die Skalierung verursachte Änderung der Position der oberen linken Ecke zu berücksichtigen. Sie können jedoch die Position der Objekte verwalten und die Transformationen anpassen, wenn sich der Dom in a ändert vernünftige Weise entgeht mir immer noch. Diese Art von fühlt sich falsch an, weil ich in die Richtung treibe, meinen eigenen Layout-Manager in Javascript zu schreiben, nur um diesen Effekt zu erzielen.