Ese es el límite de transformación para ti. Para lograr el mejor rendimiento, un resultado confiable y usar las herramientas adecuadas para el propósito correcto, sugiero aprender animaciones CSS con fotogramas clave. No es tan difícil y te permitirá descargar algunas de las tareas del hilo principal a la gpu (mejor SEO y rendimiento). De lo contrario, hay muchas bibliotecas que podría usar:

Por ejemplo: https://animejs.com/

En su caso particular, el problema no es la propiedad de transform o no tener fotogramas clave como señaló la respuesta de Filas , sino que el problema radica en la naturaleza de Javascript.

 const clickme = document.getElementById('clickme'); const box = document.getElementById('box'); clickme.addEventListener("click", () => { box.style.transform = `rotate(90deg)`; const value = parseFloat(box.style.transform.split('rotate(')[1]); if(value >= 90) { alert('Hello Rotate') } })

El navegador detiene la representación del HTML, que es responsable de box.style.transform = 'rotate(90deg)'; , y en su lugar prioriza mostrar la alert() . Aquí hay un hilo que habla más de eso.

Supongo que en su código real, estaría usando alguna otra función, en lugar de alert() . En ese caso, su código debería ejecutarse como pretendía, con la transformación ocurriendo primero, seguida de los comandos subsiguientes.

 const clickme = document.getElementById('clickme'); const box = document.getElementById('box'); clickme.addEventListener("click", () => { box.style.transform = 'rotate(90deg)'; const value = parseFloat(box.style.transform.split('rotate(')[1]); if(value >= 90) { box.style.backgroundColor="green"; //code that isn't an alert() } })

 #box { width: 100px; height: 100px; background: tomato; transition: .200s ease; }

 <div id="box"> </div> <button id="clickme"> rotate </button>

Combine esto con un evento de final de transitionend , o una función setTimeout() , si desea secuenciar los cambios de manera que los cambios/pasos individuales sean claramente visibles para el usuario.