ExampleSet a rotated element's base placement:
Try it yourself » |
The transform-origin property is not supported in any browser.
Firefox supports an alternative, the -moz-transform-origin property, but only for 2D-transforms.
Opera supports an alternative, the -o-transform-origin property, but only for 2D-transforms.
Safari and Chrome supports an alternative, the -webkit-transform-origin property, on both 2D- and 3D-transfoms.
The transform-origin property allows you to change the position on transformed elements.
2D transformed element can change the x- and y-axis of the element. 3D transformed element can also change the z-axis of the element.
To better understand the transform-origin property, view a demo.
Note: This property must be used together with the transform property.
Safari/Chrome users: To better understand this property for 3D transforms, view a demo.
Default value: | 50% 50% 0 |
---|---|
Inherited: | no |
Version: | CSS3 |
JavaScript syntax: | object.style.transformOrigin="20% 40%" |
transform-origin: x-axis y-axis z-axis; |
Property Value | Description |
---|---|
x-axis | Defining where the view is placed at the x-axis. Possible values:
|
y-axis | Defining where the view is placed at the y-axis. Possible values:
|
z-axis | Defining where the view is placed at the z-axis. Possible values:
|