CSS transform-origin eigenschap

Aanbevolen cursus:

Definitie en gebruik

De transform-origin eigenschap laat u de positie van het geconverteerde element veranderen.

2D transformatie elementen kunnen de x- en y-as van een element veranderen. 3D transformatie elementen kunnen ook hun Z-as veranderen.Om de transform eigenschap beter te begrijpen, zie dezeDemonstratie

Om de transform-origin eigenschap beter te begrijpen, zie dezeOm de transform eigenschap beter te begrijpen, zie dezeDemonstratie

Safari/Chrome gebruikers: Om de toepassing van de transform-origin eigenschap bij 3D transformaties beter te begrijpen, zie dezeOpmerking: transform Deze eigenschap moet samen gebruikt worden met

Eigenschap samen gebruiken.Om de transform eigenschap beter te begrijpen, zie dezeDemonstratie

.

Zie ook:CSS3 2D transformatie

Zie ook:CSS3 3D transformatie

CSS3 handleiding:HTML DOM referentiehandleiding:

transformOrigin eigenschap

Voorbeeld

Stel de basispositie van het roterende element in:
  div {
  transform: rotate(45deg);
transform-origin: 20% 40%;

}

Probeer het zelf

Er zijn meer voorbeelden aan de onderkant van de pagina.

CSS syntaxis Beschrijving right %transform-origin:

;

Eigenschapswaarde Waarde
Beschrijving

x-axis

  • Definieert waarop de weergave geplaatst wordt in de X-as. Mogelijke waarden:
  • top
  • left
  • Definieert waarop de weergave geplaatst wordt in de Z-as. Mogelijke waarden:
  • bottom
right

y-axis

  • Definieert waarop de weergave geplaatst wordt in de Y-as. Mogelijke waarden:
  • top
  • center
  • Definieert waarop de weergave geplaatst wordt in de Z-as. Mogelijke waarden:
  • bottom
%

z-axis

  • Definieert waarop de weergave geplaatst wordt in de Z-as. Mogelijke waarden:

length

Technische details Standaardwaarde:
50% 50% 0 Inheritance:
nee Versie:
CSS3 JavaScript syntaxis:object

.style.transformOrigin="20% 40%"

Browserondersteuning

Getallen in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Eigenschap Chrome IE Firefox Safari Opera
transform-origin
(Tweewaardige syntaxis)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform-origin
(Driewaardige syntaxis)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-