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)...





SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

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

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:

programar

es

https://pseint.es/static/images/programar-como-encajan-entre-si-transformar-1382-0.jpg

2024-06-13

 

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

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences