Cómo encajan: transformar, trasladar, rotar, escalar y desplazar | Programar Plus

0

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

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

…podemos hacer:

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

Eso es extremadamente útil, ya que tener que repetir otras transformaciones cuando cambia una sola, para que no las elimine, es tedioso y propenso a errores.

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

Pequeñas cosas para saber:

  • Las transformaciones independientes ocurren primero. El transform la propiedad ocurre en último lugar y se acumula sobre lo que ya se ha hecho, lo que puede resultar confuso¹.
  • Todos comparten lo mismo transform-origin.
  • El offset-* properties también mueve / rota elementos de manera efectiva. Aquellos suceden después de transformaciones independientes y antes transform.
  1. Claus Colloseus 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 se cancelarán efectivamente entre sí. Entonces no debería translate: 50px 0; rotate: 45deg; transform: translate(-50px, 0) rotate(-45deg); también todos cancelan? No, debido al pedido, el resultado final es como translate(14.6447px, -35.3553px).
(Visited 6 times, 1 visits today)