Style transformOrigin-eigenschap

Definitie en gebruik

transformOrigin Deze eigenschap staat u toe de positie van het geconverteerde element te wijzigen.

2D-convertionelementen kunnen de x- en y-as van het element veranderen. 3D-convertionelementen kunnen ook de z-as van het element veranderen.

Opmerking:Deze eigenschap moet samen worden gebruikt met transform-eigenschap Gebruik samen.

Zie ook:

JavaScript Style-object:transform-eigenschap

CSS-referencehandleiding:transform-origin-eigenschap

Voorbeeld

Instellen van de basispositie van het roterende element:

document.getElementById("myDIV").style.transformOrigin = "0 0";

Probeer het zelf uit

Syntax

Retourneren van de transformOrigin-eigenschap:

object.style.transformOrigin

Instellen van de transformOrigin-eigenschap:

object.style.transformOrigin = "x-axis y-axis z-axis|initial|inherit"

Eigenschapswaarde

Waarde Beschrijving
x-axis

Definieert de positie van het beeld op de x-as. Mogelijke waarden:

  • left
  • center
  • right
  • length
  • %
y-axis

Definieert de positie van het beeld op de y-as. Mogelijke waarden:

  • top
  • center
  • bottom
  • length
  • %
z-axis

Definieert de positie van het beeld op de z-as. Mogelijke waarden:

  • length
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Erft deze eigenschap van de ouderlijke element. Raadpleeg inherit.

Technische details

Standaardwaarde: 50% 50% 0
Retourwaarde: Een string die de positie van het element transform-origin-eigenschap.
CSS-versie: CSS3

Browserondersteuning

De cijfers in de tabel vermelden de versie van de browser die de eerste volledige ondersteuning voor deze eigenschap biedt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0