CSS rotation-point
Obsolete
The rotation-point and rotation properties were proposed in early drafts of the CSS Basic Box Model Level 3, but have since been abandoned and removed from the specification.
To perform rotations in CSS, use the transform property instead (and its associated properties like transform-origin).
The CSS rotation-point property was intended to define a "rotation point" when rotating an element using the rotation property.
Syntax
Possible Values
As per the early 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 of100% 100%places the lower right corner of the image in the lower right corner of the area. With a value pair of14% 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% centercenter center- Same as
50% 50% right,right center,center right- Same as
100% 50% bottom leftleft bottom- Same as
0% 100% bottom,bottom center,center bottom- Same as
50% 100% bottom rightright 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
inheritorinitial, 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
- Inherited?
- No
- Media
- Visual
- Computed Value
- For the <length> the absolute value, otherwise a percentage.
Example Code
Browser Support
Browser support for CSS properties can vary, particularly for newer or experimental features. Check current browser compatibility before using a property in production, especially when supporting older browsers.
Initial Value
CSS properties have an initial value that applies when the property has not been explicitly set. The initial value is different from the value inherited from a parent element and may vary between properties.
Inheritance
Some CSS properties inherit their computed value from their parent element by default, while others do not. The inherit, initial, unset, and revert keywords can also be used to control how a property gets its value.
Vendor Prefixes
Most modern CSS properties use the standard, unprefixed syntax. Vendor-prefixed properties such as -webkit- are mainly relevant to older browser versions or specific features and should only be used when required by your browser support targets.