CSS transform-origin egenskab

Definition og brug

transform-origin-egenskaben tillader dig at ændre positionen for det konverterede element.

2D-transformeringskomponenter kan ændre elementets x- og y-akser. 3D-transformeringskomponenter kan også ændre deres Z-akse.

For at bedre forstå transform-origin-egenskaben, se denneDemonstration.

Safari/Chrome-brugere: For at bedre forstå brugen af transform-origin-egenskaben i 3D-transformeringer, se denneDemonstration.

Bemærk:Denne egenskab skal bruges sammen med transform egenskab sammen med.

For at bedre forstå transformegenskaben, se denneDemonstration.

Se også:

CSS3 tutorial:CSS3 2D transformation

CSS3 tutorial:CSS3 3D transformation

HTML DOM reference manual:transformOrigin-egenskaben

Eksempel

Indstil basispunktets position for roterende elementer:

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

Prøv det selv

Der er flere eksempler nederst på siden.

CSS-syntaks

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

Egenskabsværdi

Værdi Beskrivelse
x-axis

Definerer hvor i X-aksen visningen placeres. Mulige værdier:

  • venstre
  • centreret
  • højre
  • length
  • %
y-axis

Definerer hvor i Y-aksen visningen placeres. Mulige værdier:

  • toppen
  • centreret
  • bunden
  • length
  • %
z-axis

Definerer hvor i Z-aksen visningen placeres. Mulige værdier:

  • length

Tekniske detaljer

Standardværdi: 50% 50% 0
Arv: nej
Version: CSS3
JavaScript-syntaks: object.style.transformOrigin="20% 40%"

Browserstøtte

Numre i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Numre i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben med præfikset -webkit-, -moz- eller -ms-.

Egenskab Chrome IE Firefox Safari Opera
transform-origin
(Tverdig grammatikk)		 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
(Treverdig grammatikk)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-