CSS rotation-point

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

Syntax

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.

<percentage>

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.

<length>

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,

top center,

center top

Same as 50% 0%

right top,

top right

Same as 100% 0%

left,

left center,

center left

Same as 0% 50%

center

center center

Same as 50% 50%

right,

right center,

center right

Same as 100% 50%

bottom left

left bottom

Same as 0% 100%

bottom,

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:

initial

Represents the value specified as the property's initial value.

inherit

Represents the computed value of the property on the element's parent.

unset

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

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.