Transforma elementos con las propiedades translate, rotate y scale
La propiedad transform de CSS
Para aplicar transformaciones a un elemento, usa la propiedad transform de CSS. La propiedad acepta uno o más objetos <transform-function> que se aplican uno tras otro.
.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}
El elemento objetivo se traslada un 50% en el eje X, se rota 30 grados y, finalmente, se escala al 120%.
Si bien la propiedad transform funciona bien, es un poco tedioso cuando quieres modificar cualquiera de esos valores de forma individual.
Para cambiar la escala cuando se coloca el cursor sobre ella, debes duplicar todas las funciones en la propiedad de transformación, aunque sus valores no se modifiquen.
.target:hover {
transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}
Las propiedades de transformación individuales
El envío con Chrome 104 son propiedades individuales para las transformaciones de CSS. Las propiedades son scale, rotate y translate, que puedes usar para definir de forma individual esas partes de una transformación.
De esta manera, Chrome se une a Firefox y Safari, que ya admiten estas propiedades.
Si reescribe el ejemplo anterior de transform con las propiedades individuales, tu fragmento se convierte en esto:
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
El orden es importante
Una diferencia clave entre la propiedad transform original de CSS y las propiedades nuevas es el orden en el que se aplican las transformaciones declaradas.
Con transform, las funciones de transformación se aplican en el orden en el que se escriben, de izquierda (fuera) a derecha (dentro).
Con las propiedades de transformación individuales, el orden no es el orden en el que se declaran. El orden es siempre el mismo: primero translate (fuera), luego rotate y, luego, scale (dentro).
Esto significa que los dos fragmentos de código siguientes dan el mismo resultado:
.transform--individual {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
.transform--individual-alt {
rotate: 30deg;
translate: 50% 0;
scale: 1.2;
}
En ambos casos, los elementos de destino se traducirán primero con 50% en el eje X, luego se rotarán con 30deg y, por último, se ajustarán a 1.2.
Si una de las propiedades de transformación individuales se declara junto con una propiedad transform, las transformaciones individuales se aplican primero (translate, rotate y, luego, scale) con la transform última (dentro). Hay más detalles en la especificación que define cómo se debe calcular la matriz de transformación.
Animaciones
El motivo principal por el que se agregaron estas propiedades es para facilitar las animaciones. Supongamos que quieres animar un elemento de la siguiente manera:
Usa transform
Para implementar esta animación con transform, deberías calcular todos los valores intermedios de todas las transformaciones definidas y, luego, incluir esos en cada fotograma clave. Por ejemplo, para hacer una rotación en la marca del 10%, también se deben calcular los valores para las otras transformaciones, ya que la propiedad transform los necesita a todos.
El código CSS resultante se convierte en el siguiente:
@keyframes anim {
0% { transform: translateX(0%); }
5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
100% { transform: translateX(100%) rotate(360deg); }
}
.target {
animation: anim 2s;
animation-fill-mode: forwards;
}
Usa propiedades de transformación individuales
Con las propiedades de transformación individuales, esto se vuelve mucho más fácil de escribir. En lugar de arrastrar todas las transformaciones de los fotogramas clave a los fotogramas clave, puedes apuntar a cada transformación de forma individual. Tampoco es necesario calcular todos esos valores intermedios.
@keyframes anim {
0% { translate: 0% 0; }
100% { translate: 100% 0; }
0%, 100% { scale: 1; }
5%, 95% { scale: 1.2; }
0% { rotate: 0deg; }
10%, 90% { rotate: 180deg; }
100% { rotate: 360deg; }
}
.target {
animation: anim 2s;
animation-fill-mode: forwards;
}
Usar propiedades de transformación individuales y varios fotogramas clave
Para que tu código sea modular, puedes dividir cada subanimación en su propio conjunto de fotogramas clave.
@keyframes move {
0% { translate: 0% 0; }
100% { translate: 100% 0; }
}
@keyframes scale {
0%, 100% { scale: 1; }
5%, 95% { scale: 1.2; }
}
@keyframes rotate {
0% { rotate: 0deg; }
10%, 90% { rotate: 180deg; }
100% { rotate: 360deg; }
}
.target {
animation: move 2s, scale 2s, rotate 2s;
animation-fill-mode: forwards;
}
Gracias a esta división, puedes aplicar cada conjunto separado de fotogramas clave como desees, ya que las propiedades de transform, que ahora se convirtieron en propiedades individuales, ya no se reemplazan entre sí. Arriba de eso, puedes asignar un cronograma diferente a cada transformación sin necesidad de volver a escribirlo completo.
Rendimiento
Las animaciones que usan estas propiedades nuevas son tan eficientes como las animaciones de la propiedad transform existente.
Las animaciones de translate, rotate y scale se ejecutan en el compositor de la misma manera que lo hacen las animaciones de transform, por lo que son excelentes para el rendimiento de la animación de la misma manera que transform.
Estas propiedades nuevas también funcionan con la propiedad will-change. En general, te recomendamos evitar el uso excesivo de will-change. Para ello, debes usarlo en la cantidad mínima de elementos necesarios y por el menor tiempo posible. Sin embargo, también es bueno ser lo más específico posible. Por ejemplo, si usas will-change para optimizar una animación con las propiedades rotate y filter, debes declararlo con will-change: rotate, filter. Esto es un poco mejor que usar will-change: transform, filter en un caso en el que se animan rotate y filter, ya que algunas de las estructuras de datos que Chrome crea con anticipación cuando usas will-change son diferentes para transform y rotate.
Parte de la serie Renovadamente interoperable