Propriété transform-origin de CSS

Definition and Usage

The transform-origin property allows you to change the position of the transformed element.

2D transformation elements can change the x and y axes of the element. 3D transformation elements can also change their Z-axis.

To better understand the transform-origin property, please see thisDemonstration.

Safari/Chrome Users: To better understand the use of the transform-origin property in 3D transformations, please see thisDemonstration.

Note:This property must be used with transform property is used together.

To better understand the transform property, please see thisDemonstration.

See Also:

CSS3 Tutorial:Transformation 2D de CSS3

CSS3 Tutorial:Transformation 3D de CSS3

HTML DOM Reference Manual:transformOrigin Property

Example

Set the base point position of the rotated element:

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

Try It Yourself

More examples can be found at the bottom of the page.

CSS Syntax

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

Property Value

Value Description
x-axis

Define where the view is placed on the X-axis. Possible values:

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

Define where the view is placed on the Y-axis. Possible values:

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

Define where the view is placed on the Z-axis. Possible values:

  • length

Technical Details

Default Value: 50% 50% 0
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.transformOrigin="20% 40%"

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Numbers in the table indicate the first browser version that fully supports this property with prefixes such as -webkit-, -moz-, or -ms-.

property Chrome IE Firefox Safari Opera
transform-origin
(two-value syntax)		 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
(three-value syntax)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-