Cómo encajan entre sí: transformar, traducir, rotar, escalar y compensar

Firefox 72 fue el primero en salir con “transformaciones independientes”. Es decir, en lugar de tener que combinar transformaciones, como:

.el {  transform: translate(10px, 10px) scale(0.95) rotate(10deg);}

…podemos hacer:

.el {  rotate: 10deg;  scale: 0.95;  translate: 10px 10px;}

Esto es extremadamente útil, ya que tener que repetir otras transformaciones cuando cambias una sola, para no eliminarlas, es tedioso y propenso a errores.

Pero hay algunos matices que debemos conocer aquí, y Dan Wilson profundiza.

Pequeñas cosas que debes saber:

• Las transformaciones independientes ocurren primero. La transformpropiedad ocurre al final y se acumula sobre lo que ya se ha hecho, lo que puede resultar confuso¹ .
• Todos comparten lo mismo transform-origin.
• Las offset-*propiedades también mueven/giran elementos de manera efectiva. Esos suceden después de transformaciones independientes y antes transform.

1. Claus Coloseus escribió para solucionar algunos problemas en esta publicación y aclarar cuán confuso puede ser esto. Por ejemplo, rotate: 45deg; transform: rotate(-45deg);no hará nada ya que ambos se aplicarán y efectivamente se cancelarán mutuamente. Entonces, ¿no deberían translate: 50px 0; rotate: 45deg; transform: translate(-50px, 0) rotate(-45deg);también cancelarse todos? No, debido al pedido, el resultado final es como translate(14.6447px, -35.3553px)...