When I set the transform origin of an element in javascript and then rotate it, it still rotates around the original point from before I changed it and then moves to where it would end if it rotated around the new origin. However, if I wait for a bit and then rotate the element, it rotates around the correct origin. Is it possible to make it so that I don't have to add a pause before the rotation?

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