Tóm Tắt

CSS

transform-origin

Property

Set a rotated element’s base placement:

div
{

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.

Show demo ❯

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-
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-

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

Property Value
Description

x-axis
Defines where the view is placed at the x-axis. Possible values:

y-axis
Defines where the view is placed at the y-axis. Possible values:

z-axis
Defines where the view is placed at the z-axis (for 3D transformations). Possible values:

initial
Sets this property to its default value. Read about initial

inherit
Inherits this property from its parent element. Read about inherit

CSS tutorial: CSS 2D Transforms

CSS tutorial: CSS 3D Transforms

HTML DOM reference: transformOrigin property