rotate()

The CSS rotate() function spins an element either clockwise or counterclockwise in a 2D plane. It is one of many transform functions used in the transform property.

For example, using rotate() we can rotate the hand around the clock:

.seconds-hand {
  transform: rotate(var(--deg));
  transform-origin: bottom center;
}

//codepen.io/anon/embed/VYKOoEP?height=550&theme-id=1&slug-hash=VYKOoEP&default-tab=result

For rotating elements tri-dimensionally, consider using rotateX() and rotateY().

The rotate() functions is defined in the CSS Transforms Module Level 1 specification.

Syntax

rotate() = rotate( [<angle> | <zero>] )

Arguments

/* <angle> */
rotateZ(90deg) /* Rotates 90 degrees clockwise */
rotateZ(-180deg) /* Rotates 180 degrees counterclockwise */

/* <angle> in turns */
rotateZ(0.25turn) /* Rotates a quater turn clockwise. */
rotateZ(1turn) /* Rotates a full 360-degree turn. */

/* <angle> in radians */
rotateZ(1.57rad) /* Rotates ~90 degrees clockwise. */
rotateZ(-3.14rad) /* Rotate ~180 degrees counterclockwise. */

The rotate() function accepts a single <angle> argument, which dictates the direction of its spin. A positive argument spins the element clockwise, while a negative argument spins the element counterclockwise.

The <angle> type has four units to choose from:

deg: One degree is 1/360 of a full circle.
grad: One gradian is 1/400 of a full circle.
rad: A radian is the length of a circle’s diameter around the shape’s arc. One radian is 180deg, or 1/2 of a full circle. One full circle is 2π radians, which is equal to 6.2832rad or 360deg.
turn: One turn is one full circle. So, halfway around a circle is equal to .5turn, or 180deg.

Also, rotate() spins the element around its center axis. To change the rotation point, we have to pass a specific point to the transform-origin property that’ll serve as the axis of rotation.

Basic usage

The rotate() function is the backbone of some of the basic animations you’ve most likely come across on, like switching from “+” to “x” when an accordion is opened. We can do that by rotating the “+” symbol by 45deg.

So, if we have a button like this:

<button class="toggle">
  <span class="icon">+</span>
  <span class="label">Open Section</span>
</button>

We can sprinkle a little JavaScript in there to trigger an .active class when the button is clicked, which rotates the icon:

.toggle.active .icon {
  transform: rotate(45deg);
}

//codepen.io/anon/embed/EagYLLm?height=450&theme-id=1&slug-hash=EagYLLm&default-tab=result

Example: Hamburger menu

Have you seen those menus that switch from a hamburger icon to a closing “X” icon when a menu dropdown or sidebar is opened? That’s a rotation, too!

We start with three spans that are styled as horizontal lines:

<button class="hamburger" id="hamburgerBtn">
  <span class="bar top"></span>
  <span class="bar middle"></span>
  <span class="bar bottom"></span>
</button>

.bar {
  width: 100%;
  height: 4px;
  background: #333;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

Notice we have a transition in there so that, when the button is clicked and the rotation happens (again, using JavaScript to toggle on an .active class), the spans transform smoothly:

.hamburger.active .top {
  transform: translateY(14px) rotate(45deg);
}

.hamburger.active .middle {
  opacity: 0;
}

.hamburger.active .bottom {
  transform: translateY(-14px) rotate(-45deg);
}

//codepen.io/anon/embed/xbEKjQX?height=450&theme-id=1&slug-hash=xbEKjQX&default-tab=result

Example: Loading icons

We can also use rotate() for loading indicators. Loading indicators usually spin while a page is, you know, loading. A common example is a semi-circle that spins until the page is done loading.

The .spinner uses the CSS animation shorthand to define an infinite spinning loading indicator, and the @keyframes spin defines a 360deg spin with the rotate() function.

.spinner {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

Now the spinner keeps on a’spinning:

//codepen.io/anon/embed/bNwbMZb?height=450&theme-id=1&slug-hash=bNwbMZb&default-tab=result

Example: Rotating text

Rotating things isn’t always about animation! We can, for example, position something like a “Feature” label next to a blog post and rotate it vertically for an interesting visual effect.

.vertical-header {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

//codepen.io/anon/embed/PwGYerv?height=600&theme-id=1&slug-hash=PwGYerv&default-tab=result

Demo

Let’s look at a more complex animation to demonstrate just how neat it is to rotate() things with CSS. If you “Rerun” the demo, you’ll see the photo swing back and forth. You can also drag the photo from left to right to rotate it.

//codepen.io/anon/embed/JoRqgwG?height=650&theme-id=1&slug-hash=JoRqgwG&default-tab=result

Specification

The CSS rotate() function is defined in the CSS Transforms Module Level 1 specification, which is currently in Editor’s Draft.

Browser support

Related tricks!

cursor
Article on Aug 28, 2019

News Jace Pro NJP

Syntax

Arguments

Basic usage

Example: Hamburger menu

Example: Loading icons

Example: Rotating text

Demo

Specification

Browser support

Related tricks!

Can you rotate the cursor in CSS?

Creating a Clock with the New CSS sin() and cos() Trigonometry Functions

How They Fit Together: Transform, Translate, Rotate, Scale, and Offset

How to Animate the Details Element

Making a Real-Time Clock With a Conic Gradient Face

Recreating Gmail’s Google Gemini Animation

Recreating the Apple Watch Breathe App Animation

Rotated Table Column Headers… Now With Fewer Magic Numbers!