CSSTrasformazioni 2D


Sintassi

  • Ruota Trasforma
  • trasforma: ruota (<angolo>)
  • Traduci Trasforma
  • transform: translate (<lunghezza o percentuale> [, lunghezza o percentuale>]?)
  • transform: translateX (<lunghezza o percentuale>)
  • transform: translateY (<lunghezza o percentuale>)
  • Traslazione obliqua
  • transform: skew (<angle> [, <angle>]?)
  • trasforma: skewX (<angle>)
  • trasformare: skewY (<angle>)
  • Trasforma la scala
  • transform: scale (<fattore-scala> [, <fattore-scala>]?)
  • transform: scaleX (<fattore di scala>)
  • transform: scaleY (<fattore di scala>)
  • Matrix Transform
  • transform: matrix (<numero> [, <numero>] {5,5})

Parametri

Funzione / Parametro Dettagli
rotate(x) Definisce una trasformazione che sposta l'elemento attorno a un punto fisso sull'asse Z.
translate(x,y) Sposta la posizione dell'elemento sull'asse X e Y.
translateX(x) Sposta la posizione dell'elemento sull'asse X.
translateY(y) Sposta la posizione dell'elemento sull'asse Y.
scale(x,y) Modifica la dimensione dell'elemento sull'asse X e Y.
scaleX(x) Modifica la dimensione dell'elemento sull'asse X.
scaleY(y) Modifica la dimensione dell'elemento sull'asse Y.
skew(x,y) Mappatura a shear, o transvection, distorcendo ogni punto di un elemento di un certo angolo in ogni direzione
skewX(x) Mappatura di shear orizzontale che distorce ciascun punto di un elemento di un certo angolo nella direzione orizzontale
skewY(y) Mappatura di taglio verticale che distorce ciascun punto di un elemento di un certo angolo nella direzione verticale
matrix() Definisce una trasformazione 2D sotto forma di una matrice di trasformazione.
angolo L'angolo con cui l'elemento deve essere ruotato o inclinato (a seconda della funzione con cui viene utilizzato). L'angolo può essere fornito in gradi ( deg ), gradienti ( grad ), radianti ( rad ) o giri ( turn ). Nella funzione skew() , il secondo angolo è opzionale. Se non fornito, non ci saranno (0) disallineamenti nell'asse Y.
lunghezza-o-percentuale La distanza espressa come lunghezza o percentuale in base alla quale l'elemento deve essere tradotto. Nella funzione translate() , la seconda lunghezza o percentuale è facoltativa. Se non fornito, non ci sarebbe nessuna (0) traduzione nell'asse Y.
fattore di scala Un numero che definisce quante volte l'elemento deve essere ridimensionato nell'asse specificato. Nella funzione scale() , il secondo fattore di scala è facoltativo. Se non viene fornito, verrà applicato anche il primo fattore di scala per l'asse Y.

Osservazioni

Sistema 2D Coordiante

Le trasformazioni sono realizzate secondo un sistema coordiante 2D X / Y. L'asse X va da destra a sinistra e l'asse Y va verso il basso come mostrato nell'immagine seguente:

Sistema di coordinate CSS 2D

Quindi un translateY() positivo translateY() va verso il basso e un translateX() positivo translateX() va bene.

Supporto per browser e prefissi

  • IE supporta questa proprietà da IE9 con il prefisso -ms- . Versioni precedenti e Edge non hanno bisogno del prefisso
  • Firefox lo supporta dalla versione 3.5 e ha bisogno del prefisso -moz- fino alla versione 15
  • Chrome dalla versione 4 e fino alla versione 34 richiede il prefisso -webkit-
  • Safari ha bisogno del prefisso -webkit- fino alla versione 8
  • Opera ha bisogno del prefisso -o- per la versione 11.5 e del prefisso -webkit- dalla versione 15 alla 22
  • Android ha bisogno del prefisso -webkit- dalla versione 2.1 alla 4.4.4

Esempio di trasformazione prefissata:

-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);

Trasformazioni 2D Esempi correlati