translate() e translateZ() consentono di spostare un elemento dalla sua posizione originale in una direzione specifica rispetto alla sua posizione attuale. Queste funzioni fanno parte della proprietà CSS transform. Inoltre, è possibile utilizzare translateX() e translateY() per spostare un elemento solo orizzontalmente o verticalmente.

transform: translate(X_value, Y_value, Z_value);
transform: translateX(value);
transform: translateY(value);
transform: translateZ(value);

• translate() - accetta fino a 3 valori;
  • X_value rappresenta lo spostamento lungo l'asse x. Un valore positivo sposta l'elemento verso destra, mentre un valore negativo lo sposta verso sinistra;
  • Y_value rappresenta lo spostamento lungo l'asse y. Un valore positivo sposta l'elemento verso il basso, e un valore negativo verso l'alto;
  • Z_value rappresenta lo spostamento lungo l'asse z. Un valore positivo avvicina l'elemento all'osservatore, mentre un valore negativo lo allontana. Se si specificano solo 1 o 2 valori, il browser applica lo stesso valore/i agli assi mancanti.
• translateX() e translateY() - accettano ciascuno 1 valore;
  • translateX(value) specifica lo spostamento orizzontale. Un valore positivo sposta l'elemento verso destra, e uno negativo verso sinistra;
  • translateY(value) specifica lo spostamento verticale. Un valore positivo sposta l'elemento verso il basso, e uno negativo verso l'alto.
• translateZ() - accetta 1 valore. Specifica lo spostamento lungo l'asse z, che può creare trasformazioni 3D. Un valore positivo avvicina l'elemento all'osservatore, e uno negativo lo allontana.

Vediamo cosa è possibile ottenere con l'aiuto di queste funzioni:

Proprietà translate3d()

È possibile aggiungere uno spostamento tridimensionale di un elemento tramite una sola proprietà. Tuttavia, generalmente gli utenti dispongono di schermi 2D e questo movimento 3D risulterà invisibile. Allo stesso tempo, un numero crescente di utenti cerca di sperimentare la realtà tridimensionale. Pertanto, presto la maggior parte degli utenti disporrà di schermi a 3 dimensioni e questa proprietà sarà utile. La sintassi è la seguente:

transform: translate3d(X_value, Y_value, Z-value);

Si aggiunge lo spostamento sull'asse z come ultimo valore. Un valore positivo indica uno spostamento verso l'utente. Un valore negativo indica uno spostamento all'indietro rispetto all'utente.

Vediamo un esempio:

Probabilmente hai uno schermo 2D come il mio, e non possiamo notare lo spostamento lungo l'asse z.