Style transformOrigin-egenskapen

Definition och användning

transformOrigin Egenskapen låter dig ändra positionen för den omvandlade elementet.

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

Kommentarer:Detta egenskap måste användas tillsammans med transform-egenskapen Använd tillsammans.

Se också:

JavaScript Style-objekt:transform-egenskapen

CSS Referenshandbok:transform-origin-egenskapen

Exempel

Ställ in grundläggande position för roterade element:

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

Prova själv

Syntax

Returnera transformOrigin-egenskapen:

object.style.transformOrigin

Ställ in transformOrigin-egenskapen:

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

Egenskapsvärde

Värde Beskrivning
x-axis

Definierar platsen för vyn på x-axeln. Möjliga värden:

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

Definierar platsen för vyn på y-axeln. Möjliga värden:

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

Definierar platsen för vyn på z-axeln. Möjliga värden:

  • length
initial Sätt detta egenskap till dess standardvärde. Se initial.
inherit Inheritera detta egenskap från föräldrelementet. Se inherit.

Tekniska detaljer

Standardvärde: 50% 50% 0
Returvärde: sträng, som anger elementets transform-origin-egenskapen.
CSS-version: CSS3

Webbläsarstöd

Tal i tabellen anger den första webbläsareversion som helt stöder detta egenskap.

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