The CSS rotate Property

Overview

The rotate property provides a way to adjust the orientation of an element independently of other transform functions. Arguably, this approach offers a simplified process for rotating user interface elements without having to recall the specific order of transform functions used in the transform property.

Examples and Usage

Below, we'll demonstrate the effects of the rotate property. We'll set up three different scenarios where the property is applied upon hovering over an element. In these scenarios, we'll rotate the elements around the Z-axis, the X-axis, and a custom vector, respectively.

HTML Structure

<div class="square" id="square-A"></div>
<div class="square" id="square-B"></div>
<div class="square" id="square-C"></div>

CSS Styling

.square {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 3em;
  transition: 1.5s ease-in-out;
  border: 2px solid #CD3333;
  background-color: #FBBF24;
}

#square-A:hover {
  /* Rotating square A by 60 degrees around the Z-axis when hovered over. */
  rotate: 60deg;
}

#square-B:hover {
  /* Rotating square B by 180 degrees around the X-axis when hovered over. */
  rotate: x 180deg;
}

#square-C:hover {
  /* Rotating square C by 180 degrees around a custom vector when hovered over. */
  rotate: 1 1 0 180deg;
}

In the CSS setup, we have three div elements each with the class .square. These squares have basic styling including dimensions, margins, and the transition property for demonstrative purposes and visual enhancement.

The critical part here is the rotate property, which is applied on :hover to each square via its unique ID.

For #square-A, we use rotate: 60deg;, rotating the square 60 degrees around the Z-axis when hovered over.
For #square-B, we use rotate: x 180deg;, which rotates the square 180 degrees around the X-axis.
Lastly, for #square-C, the property rotate: 1 1 0 180deg; rotates the square 180 degrees around a custom vector when it's hovered over.

The rotate property, thus, allows for a diverse set of transformations based on your requirements.

Values

Value	Description
`none`	Indicates that no rotation should be performed on the element.
`<angle>`	An angle value defining the angle to rotate the element around the Z-axis.
Axis name and an `<angle>` value	The name of the axis (X, Y, or Z) around which the element should be rotated, plus the angle value defining the degree of rotation.
Vector and an `<angle>` value	Three numbers representing a vector, centered on the origin, that defines the line around which the element should be rotated. Also includes an angle value defining the degree of rotation.

In the table above:

<angle> is analogous to a 2D rotate() function.
Axis name and an <angle> value is analogous to a rotateX(), rotateY(), or rotateZ() function depending on the specified axis.
Vector and an <angle> value is analogous to a rotate3d() function.

Associated Properties

scale
transform
translate

Tips and Tricks

The rotate property simplifies the syntax for defining rotations. It encapsulates the functionalities of rotate(), rotateX(), rotateY(), rotateZ(), and rotate3d(), making it a versatile choice for the different types of 2D and 3D rotations.
The rotate property can be used with CSS transitions or animations to create engaging interactive elements or dynamic visual effects on your web page.
When using the rotate property, remember that the rotation is around the center point of the element by default. You can change this by adjusting the transform-origin property.
The rotation angle can be defined in various units such as degrees (deg), gradians (grad), radians (rad), or turns(turn).

Browser Compatibility

For a more detailed breakdown, refer to the first link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes*	Yes*	No

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.