Set a rotated element's base placement:
The transformOrigin 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.
Note: This property must be used together with the transform property.
The transformOrigin property is supported in Internet Explorer 10, Firefox, and Opera.
Internet Explorer 9 supports an alternative, the msTransformOrigin property, but only for 2D-transforms.
Chrome, Safari, and Opera support an alternative, the WebkitTransformOrigin property, for both 2D- and 3D-transfoms.
Return the transformOrigin property:
Set the transformOrigin property:
|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 (for 3D transforms). Possible values:
|initial||Sets this property to its default value. Read about initial|
|inherit||Inherits this property from its parent element. Read about inherit|
|Default Value:||50% 50% 0|
|Return Value:||A String, representing the transform-origin property of an element|
CSS reference: transform-origin property