Cuando configuro el origen de transformación de un elemento en javascript y luego lo giro, todavía gira alrededor del punto original antes de que lo cambiara y luego se mueve hacia donde terminaría si girara alrededor del nuevo origen. Sin embargo, si espero un poco y luego giro el elemento, gira alrededor del origen correcto. ¿Es posible hacerlo para que no tenga que agregar una pausa antes de la rotación?
function complete() { var plane = document.getElementById("plane"); plane.style.transform = "rotateZ(90deg)"; } function turn(move) { var plane = document.getElementById("plane"); plane.classList.add("twisting"); var target_side = document.getElementsByClassName(move); for (let i = 0; i < target_side.length; i++) { let cube_face = target_side[i]; plane.appendChild(cube_face); } plane.style.transformOrigin = "0px 480 px"; setTimeout(complete, 100); }