转换 3D CSS3

Le funzionalità di trasformazione 3D di CSS3 permettono di trasformare gli elementi nello spazio 3D.

Trasformazione 3D dell'elemento

Utilizzando le funzionalità di trasformazione 3D di CSS3, è possibile eseguire operazioni di trasformazione di base sugli elementi nello spazio tridimensionale, come muovere, ruotare, ingrandire e inclinare.

L'elemento trasformato non influisce sugli elementi circostanti, ma può sovrapporsi come un elemento posizionato in modo assoluto. Tuttavia, l'elemento trasformato nel suo posizionamento predefinito (non trasformato) occupa ancora spazio nella layout.

Utilizzo delle trasformazioni CSS e della funzione Transform()

L'attributo transform del CSS3 utilizza le funzioni di trasformazione per manipolare il sistema di coordinate utilizzato dall'elemento, in modo da applicare l'effetto di trasformazione.

La seguente parte descrive le funzioni di trasformazione 3D:

Funzione translate3d()

La funzione rotation3d() ruota l'elemento nel 3D spazio attorno alla direzione vettoriale [x, y, z] di un angolo specificato. Questo può essere scritto come rotate(vx, vy, vz, angle).

Esempio

.container {
　　　　width: 125px;
　　　　height: 125px;
　　　　perspective: 500px;
　　　　border: 4px solid #e5a043;
　　　　background: #fff2dd;
}
.transformed {
　　　　-webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */
　　　　transform: translate3d(25px, 25px, 50px);　
}

La funzione translate3d(25px, 25px, 50px) sposta l'immagine di 25 pixel lungo l'asse X e Y nella direzione positiva e di 50 pixel lungo l'asse Z nella direzione positiva.

Le trasformazioni 3D utilizzano un sistema di coordinate tridimensionale, ma il movimento lungo l'asse Z non è sempre evidente, poiché questi elementi esistono su un piano bidimensionale (piano) e non hanno profondità.

Utilizzando l'elemento più alto sull'asse Z (cioè l'elemento più vicino al guardiano sembra più grande mentre l'elemento più lontano sembra più piccolo), puoi aggiungere profondità alla scena utilizzando le proprietà CSS perspective e perspective-origin.

Funzione rotate3d()

La funzione rotate3d() ruota l'elemento nel 3D spazio attorno alla direzione vettoriale [x, y, z] di un angolo specificato. Può essere scritta come rotate(vx, vy, vz, angle).

.container{
　　　　width: 125px;
　　　　height: 125px;
　　　　perspective: 300px;
　　　　border: 4px solid #a2b058;
　　　　background: #f0f5d8;
}
.transformed {
　　　　-webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
　　　　transform: rotate3d(0, 1, 0, 60deg);　
}

La funzione rotate3d(0, 1, 0, 60deg) ruota l'immagine di 60 gradi lungo l'asse Y. Puoi anche utilizzare valori negativi per ruotare l'elemento nella direzione opposta.

Funzione scale3d()

La funzione scale3d() cambia la dimensione dell'elemento. Può essere scritta come scale(sx, sy, sz). A meno che non venga combinata con altre funzioni di trasformazione come ruotare e prospettiva, l'effetto di questa funzione non è evidente, come mostrato nell'esempio seguente.

.container{
　　　　width: 125px;
　　　　height: 125px;
　　　　perspective: 300px;
　　　　border: 4px solid #6486ab;
　　　　background: #e9eef3;
}
.transformed {
　　　　-webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */
　　　　transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg);　
}

La funzione scale3d(1, 1, 2) scala l'elemento lungo l'asse Z, la funzione rotate3d(1, 0, 0, 60deg) ruota l'immagine di 60 gradi lungo l'asse X.

funzione matrix3d()

La funzione matrix3d() può eseguire tutte le trasformazioni 3D in una volta, come la traslazione, la rotazione e lo scalamento. Adotta una trasformazione 4x4Matriceformato di 16 parametri.

Questo è un esempio di trasformazione 3D eseguita utilizzando la funzione matrix3d().

.container{
　　　　width: 125px;
　　　　height: 125px;
　　　　perspective: 300px;
　　　　border: 4px solid #d14e46;
　　　　background: #fddddb;
}
.transformed {
　　　　-webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); /* Chrome, Safari, Opera */
　　　　transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);　
}

Ma quando si eseguono più trasformazioni contemporaneamente, è più comodo utilizzare una funzione di trasformazione singola e elencarle in ordine, come nel seguente esempio:

.container{
　　　　width: 125px;
　　　　height: 125px;
　　　　perspective: 300px;
　　　　border: 4px solid #a2b058;
　　　　background: #f0f5d8;
}
.transformed {
　　　　-webkit-transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); /* Chrome, Safari, Opera */
　　　　transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2);　
}

功能转换 3D

下表简要概述了所有3D转换功能。