CSS rotate Property

What You’ll Learn

The rotate property turns an element by a chosen angle. It is part of the modern CSS transforms module and works great for icons, cards, and playful UI motion.

Introduction

The rotate property in CSS is used to rotate elements in a two-dimensional space. This transformation is part of the CSS Transforms module and allows you to rotate elements by a specified angle.

This property is particularly useful for creating dynamic and visually interesting web designs.

Definition and Usage

Use rotate when you want a simple angle change without writing the full transform shorthand. It pairs naturally with transition for hover effects on buttons and icons.

You may also see the older form transform: rotate(45deg). Both rotate the element, but the standalone rotate property is cleaner when rotation is the only transform you need.

📝 Syntax

The syntax for the rotate property is straightforward. You can specify the angle of rotation using degrees, gradians, radians, or turns.

element {
  rotate: angle;
}

Here, angle can be a value in degrees (deg), gradians (grad), radians (rad), or turns (turn).

Basic Example

.rotate-box {
  rotate: 45deg;
}

Syntax Rules

• Positive angles rotate clockwise in the default 2D coordinate system.
• Negative angles rotate counter-clockwise, such as -15deg.
• none removes rotation.
• 1turn equals a full 360-degree rotation.
• Set transform-origin to change the pivot point.
• Animate rotate with transition for smooth effects.

🎯 Default Value

The default value of the rotate property is none, which means no rotation is applied. This is equivalent to 0deg visually.

💎 Property Values

When Does rotate Matter?

rotate is the right tool when a visual angle change improves the design:

• Icons — Spin a refresh or chevron icon on hover.
• Labels — Tilt badges or stickers for a playful look.
• Cards — Rotate featured tiles slightly for emphasis.
• Loading states — Animate continuous rotation for spinners.

Use rotation sparingly on body text because tilted paragraphs are harder to read.

Examples Gallery

Start with the reference 45-degree square, compare common angles, try turns, and animate rotation on hover.

<style>
  .rotate-box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    rotate: 45deg;
  }
</style>

<div class="rotate-box"></div>

<style>
  .a { rotate: 0deg; }
  .b { rotate: 45deg; }
  .c { rotate: 90deg; }
</style>

<style>
  .card {
    rotate: 0.25turn;
    transform-origin: center;
  }
</style>

<style>
  .icon {
    rotate: 0deg;
    transition: rotate 0.35s ease;
  }

  button:hover .icon {
    rotate: 180deg;
  }
</style>

rotate vs transform: rotate()

The standalone rotate property is the modern way to turn elements. The classic form is transform: rotate(45deg), which still appears in many codebases.

Control the pivot with transform-origin. Combine rotation with scale and translate when building richer transform effects.

.badge {
  transform-origin: top left;
  rotate: -12deg;
}

💡 Best Practices