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 <transform-function>
que se aplican uno después del otro.
.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}
El elemento objetivo se traduce un 50% en el eje X, se rota 30 grados y, por último, se ajusta a un 120%.
Si bien la propiedad transform
funciona bien, se vuelve un poco tediosa cuando quieres alterar 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 cambien.
.target:hover {
transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}
Las propiedades de transformación individuales
Se incluyen propiedades individuales para las transformaciones de CSS en el envío con Chrome 104. 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 vuelves a escribir el ejemplo anterior de transform
con las propiedades individuales, tu fragmento se convierte en lo siguiente:
.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 que se aplican las transformaciones declaradas.
Con transform
, las funciones de transformación se aplican en el orden en que se escriben, de izquierda (exterior) a derecha (interior).
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).
Eso significa que ambos fragmentos de código proporcionan 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 objetivo primero se trasladarán en 50%
en el eje X, luego se rotarán en 30deg
y, por último, se escalarán en 1.2
.
Si se declara una de las propiedades de transformación individuales junto con una propiedad transform
, las transformaciones individuales se aplican primero (translate
, rotate
y, luego, scale
) con transform
al final (dentro). Puedes encontrar 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 facilitar las animaciones. Supongamos que deseas animar un elemento de la siguiente manera:
Usa transform
Para implementar esta animación con transform
, tendrías que calcular todos los valores intermedios para todas las transformaciones definidas y, luego, incluirlos en cada fotograma clave. Por ejemplo, para realizar una rotación en el 10%, también se deben calcular los valores de las otras transformaciones, ya que la propiedad transform
los necesita todos.
El código CSS resultante se convierte en lo 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 un fotograma clave a otro, puedes segmentar cada transformación de forma individual. Además, ya no 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;
}
Usa 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 de fotogramas clave por separado como desees, ya que las propiedades transform
, que ahora se convirtieron en propiedades individuales, ya no se anulan entre sí. Además, puedes asignarle a cada transformación un tiempo diferente sin necesidad de volver a escribir todo el lote.
Rendimiento
Las animaciones que usan estas nuevas propiedades 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 las de transform
, por lo que son buenas 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, es mejor evitar el uso excesivo de will-change
usándolo en la cantidad mínima de elementos necesarios y durante 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 animas rotate
y filter
, ya que algunas de las estructuras de datos que Chrome crea de antemano cuando usas will-change
son diferentes para transform
en comparación con rotate
.
Parte de la serie de productos interoperables nuevos