CSS translate egenskab

foregående side transition-timing-function
Næste side unicode-bidi

Definition og brug

translate egenskaben giver dig mulighed for at ændre elementets position.

translate egenskaben definerer elementets x-aksel og y-akselskoordinater i to-dimensionalt rum. Du kan også definere z-akselskoordinater for at ændre positionen i tredimensionalt rum.

Koordinater kan kun angives som x-akselskoordinat, x-aksel og y-akselskoordinat, eller x-aksel, y-aksel og z-akselskoordinat.

For at forstå bedre translate egenskaben, seDemonstration.

Tip:For at gøre z-akslen effektiv, skal du definere en værdi for CSS perspective egenskaben.

Bemærk:En anden teknologi til at flytte elementer er at bruge CSS translate() funktion Denne sides CSS transform egenskab kan siges at være en mere simpel og direkte metode til at flytte elementer.

Eksempel

Eksempel 1

Ændre elementets position:

div {
  translate: 100px 20px;
}

Prøv det selv

Eksempel 2

Når z-akslen indstilles translate egenskaben skal også indstilles på forældrelementet, når den indstilles perspective For at vi kan se nogen effekt, skal vi have egenskaben:

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

Prøv det selv

CSS syntax

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

Egenskabsværdi

Værdi	Beskrivelse
x-axis	Definerer positionen på x-akslen. Mulige værdier: Længde Procent
y-axis	Definerer positionen på y-akslen. Mulige værdier: Længde Procent
z-axis	Definerer positionen på z-akslen. Mulige værdier: Længde Procent
initial	Sæt denne egenskab til dens standardværdi. Se: initial.
inherit	Arv denne egenskab fra forældrelementet. Se: inherit.

Tekniske detaljer

Standardværdi:	none
Arv:	Nej
Animation production:	Understøttelse. Se:Animation relaterede egenskaber.
Version:	CSS3
JavaScript syntax:	object.style.translate="10px 20px"