Proprietà CSS translate

pagina precedente transition-timing-function
Pagina successiva unicode-bidi

Definizione e uso

translate L'attributo ti permette di modificare la posizione dell'elemento.

translate L'attributo definisce le coordinate dell'asse x e y dell'elemento nello spazio bidimensionale. Puoi anche definire l'asse z per modificare la posizione nello spazio tridimensionale.

Le coordinate possono essere fornite solo con l'asse x, con gli assi x e y, o con gli assi x, y e z.

Per meglio comprendere translate Per ulteriori dettagli sull'attributoDimostrazione.

Suggerimento:Per far funzionare l'attributo dell'asse z, è necessario definire un valore per l'attributo CSS perspective.

Attenzione:Un'altra tecnica per spostare gli elementi è utilizzare Funzione CSS translate() L'attributo CSS transform di questa pagina può essere considerato un metodo più semplice e diretto per spostare gli elementi.

Esempio

Esempio 1

Modifica la posizione dell'elemento:

div {
  translate: 100px 20px;
}

Prova tu stesso

Esempio 2

Quando si imposta l'asse z translate L'attributo deve essere impostato anche sull'elemento padre quando si imposta prospettiva Per vedere qualsiasi effetto, dobbiamo impostare l'attributo

DIV1 {
  prospettiva: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

Prova tu stesso

Sintassi CSS

translate: x-axis y-axis z-axis|initial|inherit;

Valore dell'attributo

Valore	Descrizione
x-axis	Definisce la posizione sull'asse x. Valori possibili: Lunghezza Percentuale
y-axis	Definisce la posizione sull'asse y. Valori possibili: Lunghezza Percentuale
z-axis	Definisce la posizione sull'asse z. Valori possibili: Lunghezza Percentuale
initial	Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit	Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito:	nessuna
Ereditarietà:	No
Produzione animazione:	Supporto. Vedi:Proprietà correlate agli animazioni.
Versione:	CSS3
Sintassi JavaScript:	object.style.translate="10px 20px"