Digamos que tengo el siguiente código:
function rotate() { const elem = document.querySelector(".rect"); elem.style.transformOrigin = "top right"; } .rect { width: 200px; height: 100px; transform: rotateZ(45deg); background-color: #ddd; transform-origin: center; } <div class="rect"></div> <button onclick="rotate()">Rotate</button> Notará que cuando hace clic en el botón Rotate , la propiedad transform-origin del rectángulo cambia del center a top right . Como resultado, el rectángulo se mueve porque ahora gira alrededor de un origen diferente.
¿Es posible que el rectángulo mantenga su posición actual, incluso después de cambiar el origen de la transformación? Estoy buscando una manera de poder cambiar el origen de transformación de un elemento sin que se mueva en absoluto después.
Básicamente, estoy buscando una manera de poder cambiar el origen de la transformación, pero el div no cambiaría visualmente. Supongo que esto implica algún tipo de traducción en la función de rotate de Javascript, pero no estoy seguro de los cálculos exactos necesarios para lograr tal efecto.
Lo siguiente parece funcionar:
function setRectangleOrigin(elem, newOrigin) { const compStyle = window.getComputedStyle(elem); const prevML = parseInt(compStyle.marginLeft); const prevMT = parseInt(compStyle.marginTop); const r1 = elem.getBoundingClientRect(); elem.style.transformOrigin = newOrigin; const r2 = elem.getBoundingClientRect(); elem.style.marginLeft = prevML + (r1.x - r2.x); elem.style.marginTop = prevMT + (r1.y - r2.y); }Llámalo así:
setRectangleOrigin(document.querySelector(".elem"), "top left");Toma el margen izquierdo y el margen superior del rectángulo actual y luego calcula su rect cliente límite. Luego aplica el cambio al origen de la transformación e inmediatamente obtiene el nuevo cliente delimitador rect.
Entonces se trata simplemente de transformar el margen que queda a través del cambio de posición.