rotate()

rotate() | CSS-Tricks

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 Embed Fallback

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( [ | ] )

Arguments

/* */ rotate(90deg) /* Rotates 90 degrees clockwise */ rotate(-180deg) /* Rotates 180 degrees counterclockwise */

/* in turns */ rotate(0.25turn) /* Rotates a quater turn clockwise. */ rotate(1turn) /* Rotates a full 360-degree turn. */

/* in radians */ rotate(1.57rad) /* Rotates ~90 degrees clockwise. */ rotate(-3.14rad) /* Rotate ~180 degrees counterclockwise. */

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

The  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:

+ Open Section

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 Embed Fallback

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:

.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 Embed Fallback

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 Embed Fallback

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 Embed Fallback

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 Embed Fallback

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

Can you rotate the cursor in CSS?

Chris Coyier

cos() math sin() Article

on

Mar 8, 2023

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

Mads Stoumann

transform Article

on

Mar 30, 2020

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

Chris Coyier

Article

on

Mar 2, 2021

How to Animate the Details Element

Chris Coyier

conic gradients custom properties dates gradients Article

on

Sep 19, 2022

Making a Real-Time Clock With a Conic Gradient Face

Brecht De Ruyte

animation Article

on

Sep 26, 2025

Recreating Gmail’s Google Gemini Animation

John Rhea

Article

on

Nov 20, 2017

Recreating the Apple Watch Breathe App Animation

Geoff Graham

tables Article

on

Jun 1, 2020

Rotated Table Column Headers… Now With Fewer Magic Numbers!

Cappie Pomeroy

Related

transform Almanac

on

May 13, 2026

rotateX()

.element { transform: rotateY(60deg); } Gabriel Shoyombo

transform Almanac

on

rotateY()

.element { transform: rotateY(30deg); } Gabriel Shoyombo

transform Almanac

on

rotateZ()

.element { transform: rotateZ(90deg); } Gabriel Shoyombo

Almanac

on

Sep 6, 2011

transform

.element { transform: scale(2); } Sara Cope

transform transform-origin Almanac

on

Jul 9, 2012

transform-origin

.element { transform-origin: top left; } Chris Coyier

TOC Syntax Arguments Basic usage Example: Hamburger menu Example: Loading icons Example: Rotating text Demo Specification Browser support Related tricks!

This comment thread is closed. If you have important information to share, please contact us.