CSS translate egenskap

föregående sida transition-timing-function
Nästa sida unicode-bidi

Definition och användning

translate egenskapen tillåter dig att ändra elementets position.

translate egenskap definierar elementets x- och y-axelkoordinater i tvådimensionell rymd. Du kan också definiera z-axelns koordinat för att ändra positionen i tre dimensionell rymd.

koordinater kan endast ges för x-axelns koordinat, x-axelns och y-axelns koordinater, eller x-axelns, y-axelns och z-axelns koordinater.

För att bättre förstå translate egenskap, seDemonstration.

Tips:För att z-axelns egenskap ska fungera, måste du definiera ett värde för CSS perspective egenskapen.

Observera:Ett annat sätt att transplantera element är att använda CSS translate() funktion CSS transform egenskapen på denna sida kan sägas vara ett enklare och mer direkt sätt att transplantera element.

Exempel

Exempel 1

Ändra elementets position:

div {
  translate: 100px 20px;
}

Prova själv

Exempel 2

När du sätter z-axeln translate egenskap måste också sättas på föräldrelementet när du sätter perspective Egenskaper, vi måste kunna se några effekter:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
x-axis	Definiera positionen på x-axeln. Möjliga värden: Längd Procent
y-axis	Definiera positionen på y-axeln. Möjliga värden: Längd Procent
z-axis	Definiera positionen på z-axeln. Möjliga värden: Längd Procent
initial	Sätt detta egenskap till dess standardvärde. Se vidare initial.
inherit	Få detta egenskap från dess föräldrelement. Se vidare inherit.

Tekniska detaljer

Standardvärde:	none
Arv:	nej
Animační tvorba:	Stöd. Se vidare:Animation relaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.translate="10px 20px"