Runnable CSS Docs: Rotate

Q: How do you rotate an element in CSS?

Use transform: rotate(45deg); or the separate property rotate: 45deg;. Positive angles turn clockwise and negative angles turn counterclockwise, around the element's center unless you change transform-origin.

Q: What is the difference between transform: rotate() and the rotate property?

They draw the same result. The rotate property is independent of transform, so a hover rule can change scale or translate without removing the rotation, and each can have its own transition. Together they act like transform: translate() rotate() scale(), whatever order you declare them in.

Q: How do I rotate an image 90 degrees in CSS?

Add transform: rotate(90deg); (or rotate: 90deg;) to the img. The image keeps its original space in the layout, so a tall image rotated to landscape can overlap its neighbors; give its container room for the rotated size.

Q: How do I make an element spin in CSS?

Define @keyframes spin { to { rotate: 360deg; } } and apply animation: spin 1s linear infinite;. Use linear so the speed stays constant, and slow it down or stop it under prefers-reduced-motion: reduce.

Q: How do I rotate text vertically in CSS?

For a vertical label, writing-mode: vertical-rl is usually better than rotate(90deg), because it changes the layout too: the element takes vertical space instead of overlapping. Use rotate for small decorative tilts.

Rotate an element

Two ways, same result: the rotate() function inside transform, or the rotate property on its own. Positive angles turn clockwise:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotate</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 30px; }
    .box { width: 90px; height: 60px; display: grid; place-items: center; color: white; }
    .a { transform: rotate(45deg); background: #2563eb; }
    .b { rotate: 45deg; background: #16a34a; }
    .c { rotate: -15deg; background: #f59e0b; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box a">transform</div>
    <div class="box b">rotate: 45deg</div>
    <div class="box c">-15deg</div>
  </div>
</body>
</html>

The blue and green boxes are turned exactly the same way, 45 degrees clockwise around their centers. The amber box has a negative angle, so it tilts counterclockwise. Rotation never moves the layout: each box still takes its original 90 by 60 slot, which is why rotated elements can overlap their neighbors.

Angle units

Unit	Full circle	90 degrees
`deg`	`360deg`	`90deg`
`turn`	`1turn`	`0.25turn`
`rad`	`6.2832rad`	`1.5708rad`
`grad`	`400grad`	`100grad`

deg is the usual choice; turn reads well for spinning (rotate: 1turn). Angles over 360 are allowed and matter in animations: rotate(720deg) in a keyframe spins twice. Always write the unit: rotate(45) is invalid and ignored.

Drag the slider to see an angle in each unit:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angle slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .stage { display: grid; place-items: center; height: 160px; background: #f3f4f6; margin: 10px 0; }
    #arrow { width: 110px; height: 14px; background: #2563eb; border-radius: 7px; position: relative; }
    #arrow::after { content: ""; position: absolute; inset-inline-end: -10px; top: -8px; border: 15px solid transparent; border-inline-start: 18px solid #2563eb; border-inline-end: 0; }
  </style>
</head>
<body>
  <label>angle <input id="a" type="range" min="-360" max="360" value="30"></label>
  <div class="stage"><div id="arrow"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('a');
    const update = () => {
      const deg = Number(input.value);
      document.getElementById('arrow').style.rotate = deg + 'deg';
      document.getElementById('out').textContent =
        deg + 'deg = ' + (deg / 360).toFixed(3) + 'turn = ' + (deg * Math.PI / 180).toFixed(4) + 'rad';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Rotating around a corner: transform-origin

An element turns around its center by default. transform-origin moves the pivot. A clock hand pivots on its end, not its middle:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    .face { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .hand {
      position: absolute;
      left: 76px;              /* 80px center minus half the 8px width */
      top: 20px;
      width: 8px;
      height: 60px;
      border-radius: 4px;
      background: #111827;
      transform-origin: bottom center; /* pivot at the center of the face */
      rotate: 120deg;
    }
    .pin { position: absolute; left: 74px; top: 74px; width: 12px; height: 12px; border-radius: 50%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="face"><div class="hand" id="hand"></div><div class="pin"></div></div>
</body>
</html>

The hand's bottom end sits on the amber pin at the center of the face, and rotate: 120deg turns it to four o'clock. Remove the transform-origin line and the hand spins around its own middle instead, off the pin.

Rotating text and vertical labels

A small tilt with rotate is fine for a badge or a sticker. For a truly vertical label, writing-mode is better, because it changes the layout: the element becomes tall and narrow instead of overlapping what is next to it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical text</title>
  <style>
    body { font-family: system-ui, sans-serif; padding-top: 24px; }
    .row { display: flex; gap: 12px; align-items: flex-start; }
    .label { background: #2563eb; color: white; padding: 6px 10px; }
    .rotated { rotate: -90deg; }
    .vertical { writing-mode: vertical-rl; rotate: 180deg; }
    .content { background: #e5e7eb; padding: 10px; }
    .badge { display: inline-block; rotate: -6deg; background: #f59e0b; padding: 4px 10px; margin: 16px 0 0 8px; }
  </style>
</head>
<body>
  <div class="row"><div class="label rotated" id="r">Section</div><div class="content">rotate: -90deg overlaps</div></div>
  <div class="row" style="margin-top: 20px;"><div class="label vertical" id="v">Section</div><div class="content">writing-mode takes vertical space</div></div>
  <span class="badge">New</span>
  <p id="out"></p>
  <script>
    const size = (id) => { const el = document.getElementById(id); return el.offsetWidth + ' x ' + el.offsetHeight; };
    document.getElementById('out').textContent = 'layout box: rotated ' + size('r') + ', writing-mode ' + size('v');
  </script>
</body>
</html>

The readout shows the layout size of each label. The rotated one still takes its original wide, short box: it leaves an empty gap beside it and sticks out above and below its row, into whatever is there. The writing-mode one takes a tall, narrow box. Adding rotate: 180deg makes it read from bottom to top, which is the usual direction for a vertical label.

Rotate an icon on click or hover

Turning an arrow 180 degrees is the standard way to show that a section is open. Combine rotate with a transition:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotating arrow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font: inherit; border: 1px solid #111827; background: white; border-radius: 6px; }
    .chevron { width: 10px; height: 10px; border-inline-end: 2px solid #111827; border-bottom: 2px solid #111827; rotate: 45deg; transition: rotate 0.25s ease-out; }
    .toggle[aria-expanded="true"] .chevron { rotate: 225deg; }
  </style>
</head>
<body>
  <button class="toggle" aria-expanded="false">Details <span class="chevron" aria-hidden="true"></span></button>
  <script>
    const btn = document.querySelector('.toggle');
    btn.addEventListener('click', () => btn.setAttribute('aria-expanded', btn.getAttribute('aria-expanded') !== 'true'));
  </script>
</body>
</html>

The chevron is a square with two borders, turned 45 degrees so it points down. When the button is expanded it goes to 225 degrees, pointing up, and the transition animates the half turn. The aria-expanded attribute drives the style, so the visual state and the state screen readers announce can never disagree.

A spinning loader

A spin is a rotation from 0 to 360 degrees, repeated with linear timing so the speed never changes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spinner</title>
  <style>
    @keyframes spin {
      to { rotate: 360deg; }
    }
    .spinner {
      width: 36px;
      height: 36px;
      border: 4px solid #e5e7eb;
      border-top-color: #2563eb;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .spinner { animation-duration: 3s; } /* slower, still shows activity */
    }
  </style>
</head>
<body>
  <div class="spinner" role="status" aria-label="Loading"></div>
</body>
</html>

With only a to keyframe, the animation starts from the element's own rotation (none) and ends at 360deg, and infinite repeats it without a jump because 360deg looks the same as 0. For people who asked their system for reduced motion, the spinner turns three times slower. More on keyframes on the animation page.

3D rotation: rotateX, rotateY

rotateX() tips an element backward around the horizontal axis and rotateY() turns it around the vertical axis, like a door. Without perspective they just look squashed; perspective on the parent adds depth:

.scene { perspective: 600px; }
.card  { transform: rotateY(35deg); }
.flip  { transform: rotateY(180deg); backface-visibility: hidden; } /* card flip */

To mirror an element rather than turn it, use scale: -1 1 (a horizontal flip). A rotation of 180 degrees turns it upside down, which is not the same thing.

Common mistakes

Rotating a <span> or <a> that stays put. Plain inline elements ignore transforms. Add display: inline-block.
A rotation that disappears on hover. A hover rule with transform: scale(1.1) replaces transform: rotate(...). Use the separate rotate and scale properties, or list both functions.
Expecting the layout to make room. A rotated image keeps its unrotated box and overlaps its neighbors. Give the container the rotated size, or use writing-mode for text.
Spinners with ease. The default timing speeds up and slows down every turn. Use linear.
Rotating around the wrong point. Set transform-origin before tuning the angle.

Frequently Asked Questions

How do you rotate an element in CSS?

Use transform: rotate(45deg); or the separate property rotate: 45deg;. Positive angles turn clockwise and negative angles turn counterclockwise, around the element's center unless you change transform-origin.

What is the difference between transform: rotate() and the rotate property?

They draw the same result. The rotate property is independent of transform, so a hover rule can change scale or translate without removing the rotation, and each can have its own transition. Together they act like transform: translate() rotate() scale(), whatever order you declare them in.

How do I rotate an image 90 degrees in CSS?

Add transform: rotate(90deg); (or rotate: 90deg;) to the img. The image keeps its original space in the layout, so a tall image rotated to landscape can overlap its neighbors; give its container room for the rotated size.

How do I make an element spin in CSS?

Define @keyframes spin { to { rotate: 360deg; } } and apply animation: spin 1s linear infinite;. Use linear so the speed stays constant, and slow it down or stop it under prefers-reduced-motion: reduce.

How do I rotate text vertically in CSS?

For a vertical label, writing-mode: vertical-rl is usually better than rotate(90deg), because it changes the layout too: the element takes vertical space instead of overlapping. Use rotate for small decorative tilts.

Related concepts