Tóm Tắt
CSS
transform-origin
Property
Example
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 ❯
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-
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-
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