CSS transform-origin egenskap

Definition och användning

transform-origin-egenskapen låter dig ändra positionen på det omvandlade elementet.

2D-omvandlingselement kan ändra elementets x- och y-axel. 3D-omvandlingselement kan också ändra sin z-axel.

För att bättre förstå transform-origin-egenskapen, se dennaDemonstration.

Safari/Chrome-användare: För att bättre förstå användningen av transform-origin-egenskapen för 3D-omvandlingar, se dennaDemonstration.

Kommentar:Denna egenskap måste användas tillsammans med transform egenskaper.

För att bättre förstå transform-egenskapen, se dennaDemonstration.

Se också:

CSS3 kurs:CSS3 2D omvandling

CSS3 kurs:CSS3 3D omvandling

HTML DOM referenshandbok:transformOrigin-egenskapen

exempel

Ställ in baspunkten för roterande elementets position:

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

Prova själv

Det finns fler exempel längre ner på sidan.

CSS-syntax

transform-origin: x-axis y-axis z-axis;

egenskapsvärde

värde beskrivning
x-axis

Definierar var x-axeln placeras i synsvyn. Möjliga värden:

  • vänster
  • centrerad
  • höger
  • längd
  • %
y-axis

Definierar var y-axeln placeras i synsvyn. Möjliga värden:

  • övre
  • centrerad
  • nedre
  • längd
  • %
z-axis

Definierar var z-axeln placeras i synsvyn. Möjliga värden:

  • längd

Tekniska detaljer

Standardvärde: 50% 50% 0
Ärvnad: nej
Version: CSS3
JavaScript-syntax: object.style.transformOrigin="20% 40%"

Webbläsarstöd

Tal i tabellen anger den första webbläsarens version som fullständigt stöder egenskapen.

Tal i tabellen anger den första webbläsarens version som fullständigt stöder egenskapen med prefixet -webkit-, -moz- eller -ms-.

egenskap Chrome IE Firefox Safari Opera
transform-origin
(tvärvärdsgrammatik)		 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
(trevärdsgrammatik)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-