CSS rotation-point

The CSS rotation-point property is used to define a "rotation point" when rotating an element using the rotation property.


The rotation-point and rotation properties were proposed in CSS Basic Box Model Level 3, which is now outdated.

To perform rotations in CSS, use the transform property instead (and its associated properties). Although this property is still in working draft status (at the time of writing), it appears to be the way forward when dealing with rotating HTML elements with CSS.


Possible Values

As per the W3C draft specification, here are the allowed values.

This property accepts a pair of values that defines a point as an offset from the top left border edge. Percentages refer to the width and height of the border box. Values may be negative.

With a value pair of 0% 0%, the upper left corner of the image is aligned with the upper left corner of some area, usually the box's padding edge, but possibly the border edge, content edge or the viewport. A value pair of 100% 100% places the lower right corner of the image in the lower right corner of the area. With a value pair of 14% 84%, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the area.
With a value pair of 2cm 1cm, the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the area.
top left,
left top
Same as 0% 0%
top center,
center top
Same as 50% 0%
right top,
top right
Same as 100% 0%
left center,
center left
Same as 0% 50%
center center
Same as 50% 50%
right center,
center right
Same as 100% 50%
bottom left
left bottom
Same as 0% 100%
bottom center,
center bottom
Same as 50% 100%
bottom right
right bottom
Same as 100% 100%

If only one percentage or length value is given, it sets the horizontal position only, and the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of keyword, length and percentage values are allowed, (e.g., 50% 2cm or center 2cm or center 10%). For combinations of keyword and non-keyword values, left and right may only be used as the first value, and top and bottom may only be used as the second value. Negative positions are allowed.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

Represents the value specified as the property's initial value.
Represents the computed value of the property on the element's parent.
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Initial Value
50% 50%
Applies To
This property applies only to block-level elements
Computed Value
For the <length> the absolute value, otherwise a percentage.

Example Code

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don't need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.