Search within TutorialsPark

CSS3 transform-origin Property


To specify the origin of the transform.


Definition and Notes.

1. The CSS transform-origin property is used specify the anchor point of the transform.

2. It can take two length, percentages, or keywords representing the horizontal and vertical positions, respectively. If only single value is given, the vertical position defaults to center


Syntax:

CSS transform-origin property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note-By default, a transform is applied with the center as the origin

Property Values

Value Description
<percentage> The horizontal and vertical offset are specified in percentages of the bounding box
<length> The horizontal and vertical offset are specified as an offset from the top left corner of the bounding box.
left
center
right
Specify a position on the x axis .
top
center
bottom
Specify a position on the y axis.

Specifications

Specs Value
Name transform
Value none | <transform-function> [<transform-function>]*
Initial Value normal
Applies to Block and inline-level Elements
Javascript syntax object.style.transformOrigin="bottom left"
Inherited No
Computed Value Same as declared Value
Browser Support internetexplorer safari firefox opera chrome

Related Examples.