YouTip

## CSS3 rotation Property The `rotation` property in CSS3 is designed to rotate a block-level element in a counter-clockwise direction around a specific anchor point defined by the `rotation-point` property. --- ## Browser Support Currently, **no major web browsers support the `rotation` property**. | Chrome | Edge/IE | Firefox | Safari | Opera | | :---: | :---: | :---: | :---: | :---: | | Not Supported | Not Supported | Not Supported | Not Supported | Not Supported | > **Modern Alternative:** To rotate elements in modern production environments, use the widely supported [`transform: rotate()`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate) property along with [`transform-origin`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) instead. --- ## Definition and Usage The `rotation` property rotates a block-level element. The pivot point of this rotation is determined by the companion property `rotation-point`. ### Property Specifications | Feature | Description | | :--- | :--- | | **Default Value:** | `0` | | **Inherited:** | No | | **CSS Version:** | CSS3 (Draft/Experimental) | | **JavaScript Syntax:** | `object.style.rotation = "180deg"` | --- ## Syntax ```css rotation: angle; ``` ### Property Values | Value | Description | | :--- | :--- | | *angle* | Defines the angle of rotation for the element. Common values range from `0deg` to `360deg` (negative values are also permitted). | --- ## Code Examples ### Theoretical CSS3 Rotation Example The following example demonstrates how the `rotation` and `rotation-point` properties were designed to be used together to rotate an `h1` element by 180 degrees: ```css h1 { /* Set the rotation pivot point to the center of the element */ rotation-point: 50% 50%; /* Rotate the element 180 degrees */ rotation: 180deg; } ``` ### Modern, Cross-Browser Compatible Alternative Because the CSS3 `rotation` property is not supported by modern browsers, you should use the `transform` property to achieve the exact same visual effect: ```css h1 { /* Set the pivot point (equivalent to rotation-point) */ transform-origin: 50% 50%; /* Rotate the element (equivalent to rotation) */ transform: rotate(180deg); } ```