CSS3 transform-origin Property


Example

Set a rotated element's base placement:

div {
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin: 20% 40%; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    transform-origin: 20% 40%;
}

Try it yourself »

Definition and Usage

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

2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element.

To better understand the transform-origin property, view a demo.

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

Tip: To better understand this property for 3D transforms, view a demo.

Default value: 50% 50% 0
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.transformOrigin="0 0" Try it

Browser Support

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

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
transform-origin
(two-value syntax)
36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
3.2 -webkit- 23.0
15.0 -webkit-
12.1
10.5 -o-
transform-origin
(three-value syntax)
36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-

CSS Syntax

transform-origin: x-axis y-axis z-axis|initial|inherit;

Property Values

Property Value Description
x-axis Defines where the view is placed at the x-axis. Possible values:
  • left
  • center
  • right
  • length
  • %
y-axis Defines where the view is placed at the y-axis. Possible values:
  • top
  • center
  • bottom
  • length
  • %
z-axis Defines where the view is placed at the z-axis (for 3D transformations). Possible values:
  • length
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS 2D Transforms

CSS tutorial: CSS 3D Transforms

HTML DOM reference: transformOrigin property



SHARE THIS PAGE

COLOR PICKER

colorpicker





Search w3schools.com:

Translate w3schools.com: