CSS translate eigenschap

vorige pagina transition-timing-function
Volgende pagina unicode-bidi

Definitie en gebruik

translate Eigenschap staat je toe de positie van het element te wijzigen.

translate Eigenschap definieert de x-as en y-ascoördinaten van het element in het tweedimensionale ruimte. Je kunt ook de z-ascoördinaat definiëren om de positie in het driedimensionale ruimte te wijzigen.

Coördinaten kunnen alleen de x-ascoördinaat, de x-as en y-ascoördinaat, of de x-as, y-as en z-ascoördinaat aangeven.

Om beter te begrijpen translate Eigenschap, raadpleegDemonstratie.

Tip:Om de z-as eigenschap effectief te maken, moet je een waarde definiëren voor de CSS perspective eigenschap.

Opmerking:Een ander techniek om elementen te verschuiven is het gebruik van de CSS translate() functie De CSS transform eigenschap op deze pagina kan gezegd worden als een eenvoudiger en directere manier om elementen te verschuiven.

Voorbeeld

Voorbeeld 1

Verander de positie van het element:

div {
  translate: 100px 20px;
}

Probeer het zelf

Voorbeeld 2

Wanneer de z-as ingesteld wordt translate eigenschap moet ook ingesteld worden op het ouder element perspective Eigenschappen, we kunnen geen effect zien:

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

Probeer het zelf

CSS Syntax

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

Eigenschapswaarde

Waarde	Beschrijving
x-axis	Definieert de positie op de x-as. Mogelijke waarden: lengte percentage
y-axis	Definieert de positie op de y-as. Mogelijke waarden: lengte percentage
z-axis	Definieert de positie op de z-as. Mogelijke waarden: lengte percentage
initial	Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap erfgen van de ouder element. Raadpleeg inherit.

Technische details

Standaardwaarde:	none
Inheritance:	nee
Animatie maken:	ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript Syntax:	object.style.translate="10px 20px"