Wie kann ich die obere linke Position nach der Größenänderung eines gedrehten Objekts aktualisieren?

Question

Ich habe ein Objekt, das von jeder seiner 4 Seiten sowie einer seiner 4 Ecken geändert werden kann.

Jetzt versuche ich, es drehbar zu machen, und das mache ich mit der CSS-Eigenschaft translate: rotate(angle), wobei der Anker das Zentrum des Objekts ist.

Das Objekt hat die Eigenschaften oben, links, Breite, Höhe und Winkel.

Das Problem ist, dass wenn es einmal gedreht wird, wenn ich es von der unteren rechten Ecke zum Beispiel Größe ändern muss, behält es nicht seine Position oben links, während immer noch den zentralen Ankerpunkt.

Ich muss einen Weg finden, um die Position oben links zu erhalten, indem ich sie aktualisiere, wahrscheinlich mit einer Trigonometrie.

document.getElementById("button").addEventListener("click", function() { 
 
    var obj = document.getElementById("object"); 
 

 
    console.log(obj.style.top, obj.style.left); // 100, 100 
 

 
    obj.style.width = "200px"; 
 
    obj.style.height = "200px"; 
 

 
    // Something needs to be done here to update the top left position and keep it in place 
 

 
});

div { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 100px; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: red; 
 
    transform-origin: 50% 50%; 
 
    transform: rotate(20deg); 
 
}

<div id="object"></div> 
 
<button id="button">Resize bottom-right corner</button>

Ich habe eine Geige here

Answer 1

Ich nehme an, Sie versuchen, es an seinem Platz bleiben zu machen, so fügen Sie einfach:

obj.style.left = "25px"; 
obj.style.top = "25px"; 

nach der Höhe und Breite einstellen. Um die Position zu erhalten, habe ich gesehen, dass Sie 50 bis 200 Pixel groß wurden (4x erhöhen), also habe ich ein Viertel des ursprünglichen x/y gemacht, indem ich es an die "selbe" Stelle gesetzt habe.

Hoffe, das hilft! (codepen: http://codepen.io/JohnJ1101/pen/wJpJqE)