CSS rotate Property

Definition and Usage

The rotate property turns an element around its transform-origin. An angle alone rotates around the Z axis (flat on the screen). You can also rotate around x, y, z, or a custom 3D vector.

It is an individual transform property, like translate and scale. That lets you change rotation without rewriting a full transform list. The initial value is none. It is not inherited and creates a stacking context when not none.

CSS Syntax

Example: rotate: 45deg; or rotate: y 180deg;. Positive 2D angles turn clockwise.

Property Values

How to Use rotate

Pick an angle (and optional axis), then adjust the pivot if the turn looks wrong.

1. Choose the element to turn (any transformable box).
2. Set rotate to an angle, or an axis plus angle.
3. Change transform-origin if you need a different pivot.
4. Optional: pair with transition for hover motion — respect prefers-reduced-motion when animating.

Live Preview

Change rotate on the sample box. The dashed frame is the original layout space.

CSS Examples

Each snippet focuses on rotate. Extra styles stay minimal for study. Use Try It Yourself for a live editor.

<style>
    .box {
    rotate: 45deg;
    background: #2563eb;
    color: #fff;
    padding: 16px;
    width: 80px;
    text-align: center;
  }
</style>

<div class="box">45deg</div>

<style>
    .box {
    rotate: 30deg;
    transform-origin: top left;
    background: #2563eb;
    color: #fff;
    padding: 16px;
    width: 80px;
    text-align: center;
  }
</style>

<div class="box">Pivot TL</div>

<style>
  button {
    rotate: 0deg;
    transition: rotate 0.25s ease;
    background: #2563eb;
    color: #fff;
    border: 0;
    padding: 12px 16px;
  }
  button:hover {
    rotate: 15deg;
  }
</style>

<button type="button">Hover me</button>

Key Takeaways