CSS rotate Property

The rotate property allows you to spin an element around a specific axis independently of the transform property.

selector { rotate: none | <angle> | [ x | y | z | <number>{3} ] && <angle>; }

none	No rotation is applied to the element.
<angle>	Specifies the angle to rotate the element around the Z-axis using units like deg, rad, grad, or turn.
x <angle>	Rotates the element around the horizontal X-axis by the specified angle.
y <angle>	Rotates the element around the vertical Y-axis by the specified angle.
z <angle>	Rotates the element around the Z-axis, which is equivalent to a 2D rotation.
<number> <number> <number> <angle>	Defines a custom vector in 3D space (x, y, z) and rotates the element around that axis.

Code Examples

A basic example showing a square div rotated 45 degrees clockwise using the standalone rotate property.

<div style="width: 100px; height: 100px; background-color: #f06; rotate: 45deg;"></div>

An advanced example using JavaScript to toggle a 3D Y-axis rotation, creating a flip effect with a CSS transition.

<div id="card" style="width: 150px; height: 200px; background-color: #333; transition: rotate 0.5s; cursor: pointer;"></div>
<button onclick="flipCard()">Flip Card</button>
<script>
function flipCard() {
  const card = document.getElementById("card");
  card.style.rotate = card.style.rotate === "y 180deg" ? "y 0deg" : "y 180deg";
}
</script>

Pro Tip

You can use the "turn" unit for more intuitive coding. For example, "0.5turn" is a perfect 180-degree flip, and "0.25turn" is a 90-degree snap. This is often easier to visualize than calculating degrees when you are building out your layouts.

Deep Dive

Think of the rotate property like a screwdriver turning a screw. You specify the direction and how much of a turn to apply. Unlike the older "transform: rotate()" function, this is a standalone property. This means you can animate or change rotation without worrying about accidentally overwriting your scale or translate settings. It defaults to rotating around the Z-axis, which is the imaginary line pointing straight at your face, unless you specify 3D coordinates. By using this property, you decouple rotation from other transformations, making your CSS much easier to maintain as your project grows.

Best Practices

Use this standalone property when you need to animate or manipulate rotation independently of other transformations. It keeps your CSS much cleaner and more modular than stacking multiple functions inside a single transform string. It is especially useful in keyframe animations where you only want to update the rotation without repeating the entire transform list.

Common Pitfalls

Developers often forget that this property is separate from the transform property; if you use both, they stack together. Also, you must include a unit like "deg" or "turn" for the angle, otherwise the browser will ignore the rule entirely. Remember that rotation happens around the transform-origin, which defaults to the center of the element.

Accessibility

Avoid rotating critical text or UI elements excessively as it can make content difficult to read for users with visual impairments or dyslexia. Keep animations slow and purposeful to prevent triggering motion sickness in users sensitive to movement. Ensure that any interactive rotated elements remain easy to target with a mouse or touch device.

Dev Data Table: rotate property

default	none
animatable	yes
inherited	no
experimental	no
year_intro	2022
year_standard	2022
js_syntax_1	element.style.rotate = "45deg";
js_syntax_2	element.style.setProperty("rotate", "45deg");
js_note	When using JavaScript to manipulate rotation, the value must be a string containing the angle and its unit.
browsers	{ "Chrome": 104, "Edge": 104, "Firefox": 72, "Safari": 14.1, "Opera": 90, "Chrome Android": 104, "Safari on iOS": 14.5, "Samsung Internet": 20, "Opera Mobile": 71 }