All in One 586: 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;
}

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);
}

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);
}

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:

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);
}

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.