Trasforma elementi con le proprietà translate, rotate e scale
La proprietà transform CSS
Per applicare le trasformazioni a un elemento, utilizza la proprietà transform del CSS. La proprietà accetta uno o più <transform-function> che vengono applicati uno dopo l'altro.
.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}
L'elemento scelto come target viene spostato del 50% sull'asse X, ruotato di 30 gradi e infine ridimensionato fino al 120%.
La proprietà transform funziona bene, ma diventa un po' noiosa quando si vuole modificare uno qualsiasi di questi valori singolarmente.
Per modificare la scala al passaggio del mouse, devi duplicare tutte le funzioni nella proprietà di trasformazione, anche se i relativi valori rimangono invariati.
.target:hover {
transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}
Le singole proprietà della trasformazione
La spedizione con Chrome 104 è una proprietà individuale per le trasformazioni CSS. Le proprietà sono scale, rotate e translate, che puoi utilizzare per definire singolarmente le parti di una trasformazione.
In questo modo, Chrome si unirà a Firefox e Safari che già supportano queste proprietà.
Riscrivendo l'esempio transform precedente con le singole proprietà, lo snippet diventa questo:
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
L'ordine conta
Una differenza fondamentale tra la proprietà CSS transform originale e le nuove proprietà è l'ordine in cui vengono applicate le trasformazioni dichiarate.
Con transform, le funzioni di trasformazione vengono applicate nell'ordine in cui sono scritte: da sinistra (esterno) a destra (all'interno).
Con le singole proprietà di trasformazione, l'ordine non corrisponde all'ordine in cui vengono dichiarate. L'ordine è sempre lo stesso: prima translate (all'esterno), poi rotate e infine scale (all'interno).
Ciò significa che entrambi i seguenti snippet di codice danno lo stesso risultato:
.transform--individual {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
.transform--individual-alt {
rotate: 30deg;
translate: 50% 0;
scale: 1.2;
}
In entrambi i casi, gli elementi scelti come target verranno prima tradotti da 50% sull'asse X, quindi ruotati di 30deg e infine ridimensionati di 1.2.
Se una delle singole proprietà di trasformazione viene dichiarata insieme a una proprietà transform, le singole trasformazioni vengono applicate per prime (translate, rotate e poi scale) con l'ultima transform (all'interno). Ulteriori dettagli sono disponibili nella specifica che definisce come deve essere calcolata la matrice di trasformazione.
Animazioni
Il motivo principale per cui sono state aggiunte queste proprietà è semplificare le animazioni. Supponiamo che tu voglia animare un elemento nel seguente modo:
In uso: transform
Per implementare questa animazione usando transform, dovresti calcolare tutti i valori intermedi per tutte le trasformazioni definite e includere questi valori in ogni fotogramma chiave. Ad esempio, per eseguire una rotazione in corrispondenza del contrassegno del 10%, è necessario calcolare anche i valori delle altre trasformazioni, poiché la proprietà transform necessita di tutti questi valori.
Il codice CSS risultante diventa questo:
@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;
}
Utilizzo di singole proprietà di trasformazione
Con le singole proprietà di trasformazione, questo diventa molto più facile da scrivere. Anziché trascinare tutte le trasformazioni da un fotogramma chiave all'altro, puoi scegliere come target ogni trasformazione singolarmente. Inoltre, non è più necessario calcolare tutti i valori intermedi.
@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;
}
Utilizzo di singole proprietà di trasformazione e diversi fotogrammi chiave
Per rendere il codice modulare, puoi suddividere ogni animazione secondaria in un proprio insieme di fotogrammi chiave.
@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;
}
Grazie a questa suddivisione puoi applicare come preferisci ogni insieme separato di fotogrammi chiave poiché le proprietà transform, che ora sono diventate singole, non si sovrascrivono più l'una sull'altra. Sopra puoi assegnare un tempo diverso a ogni trasformazione senza dover riscrivere tutto.
Esibizione
Le animazioni che utilizzano queste nuove proprietà sono efficienti tanto quanto quelle della proprietà transform esistente.
Le animazioni di translate, rotate e scale vengono eseguite sul compositore allo stesso modo di quelle di transform, pertanto sono utili per le prestazioni delle animazioni come quelle di transform.
Queste nuove proprietà funzionano anche con la proprietà will-change. In generale, è meglio evitare un uso eccessivo di will-change usandolo per il numero minimo di elementi necessari e per un periodo di tempo il più breve possibile. Ma è bene anche essere il più specifici possibile. Ad esempio, se utilizzi will-change per ottimizzare un'animazione con le proprietà rotate e filter, devi dichiararlo utilizzando will-change: rotate, filter. Questa opzione è leggermente migliore rispetto all'uso di will-change: transform, filter se attivi rotate e filter perché alcune delle strutture di dati che Chrome crea in anticipo quando usi will-change sono diverse per transform rispetto a rotate.
Parte della serie Newly interoperable