CSS rotate() Function

CSS rotate() Function

The CSS rotate() function rotates an element around a specified point in two-dimensional space.

It is used with the transform property and accepts an angle that determines how far the element rotates. The rotation occurs around the element's transform-origin, which defaults to its center.

Syntax

transform: rotate(angle);

The rotate() function accepts one angle value.

For example:

transform: rotate(45deg);
transform: rotate(-30deg);
transform: rotate(0.25turn);
transform: rotate(1rad);
transform: rotate(100grad);

Positive angles rotate clockwise in a typical left-to-right writing direction, while negative angles rotate counterclockwise.

The function returns a CSS <transform-function> value and is used within the transform property.

Parameters

The rotate() function accepts a single required parameter.

For example:

transform: rotate(90deg);

This rotates the element by one-quarter of a full revolution.

The angle can be positive, negative, or zero.

Unlike some transform functions, rotate() does not accept a unitless number as its angle.

How It Works

The rotate() function changes an element's visual orientation without changing its original position in the document layout.

For example:

.box {
  transform: rotate(30deg);
}

The element rotates 30 degrees around its transform origin.

By default, the origin is the center of the element.

Rotation affects the element's rendered appearance, including its content and borders.

The original layout space remains reserved, so a rotated element can overlap nearby content or extend beyond its container.

The transformation is applied after the element has been laid out.

Angle Units

The rotate() function supports four CSS angle units.

For example, these values represent the same quarter-turn rotation:

transform: rotate(90deg);
transform: rotate(0.25turn);
transform: rotate(100grad);

The equivalent radian value is approximately 1.570796rad.

Degrees are commonly used for simple rotations, while turns are convenient for full or partial revolutions.

Positive and Negative Rotations

The sign of the angle determines the direction of rotation.

In a typical left-to-right writing direction, positive values rotate clockwise and negative values rotate counterclockwise.

For example:

.clockwise {
  transform: rotate(30deg);
}
.counterclockwise {
  transform: rotate(-30deg);
}

A value of 0deg produces no visible rotation.

Angles greater than 360 degrees are also valid:

transform: rotate(450deg);

The final orientation is equivalent to rotate(90deg), although the additional revolution can matter during animation.

In right-to-left writing directions, the direction associated with positive and negative rotations is reversed.

Transform Origin

The transform-origin property defines the point around which an element rotates.

By default, the origin is the center of the element.

For example:

.box {
  transform: rotate(45deg);
  transform-origin: center;
}

The origin can be moved using keywords, percentages, or lengths.

For example:

.top-left {
  transform: rotate(45deg);
  transform-origin: top left;
}
.bottom-right {
  transform: rotate(45deg);
  transform-origin: bottom right;
}
.custom-origin {
  transform: rotate(45deg);
  transform-origin: 25% 75%;
}

Changing the origin changes the path followed by the element's corners during rotation.

For example, rotating around the top-left corner keeps that point fixed while the rest of the element moves around it.

Combining Transforms

The rotate() function can be combined with other transform functions in a single transform declaration.

For example:

.box {
  transform: translateX(40px) rotate(30deg);
}

This applies translation and rotation as part of one combined transformation.

The order of transform functions matters because transformations are composed in the order written, with the resulting operations affecting the coordinate system used by subsequent transformations.

For example:

.first {
  transform: translateX(40px) rotate(30deg);
}
.second {
  transform: rotate(30deg) translateX(40px);
}

These declarations generally produce different results.

In the second declaration, the translation follows the rotated local coordinate system, so the element can move diagonally rather than horizontally.

Multiple transforms should be written in the intended order to achieve predictable positioning and orientation.

rotate() vs. rotate Property

The rotate() function and the CSS rotate property are related but are not interchangeable in syntax.

For example:

.box-one {
  transform: rotate(45deg);
}
.box-two {
  rotate: 45deg;
}

Both examples rotate an element by 45 degrees when used alone.

When individual transform properties are combined with transform, they are applied in a defined order: translate, then rotate, then scale, followed by the functions in transform.

The standalone rotate property can also express three-dimensional rotations, while the rotate() function performs a two-dimensional rotation.

Transitions and Animations

The rotate() function can be used with CSS transitions and animations to create rotating effects.

For example, a hover transition:

.rotate-hover {
  transition: transform 0.3s ease;
}
.rotate-hover:hover {
  transform: rotate(15deg);
}

The element rotates smoothly when hovered.

A continuous rotation can be created with keyframes:

@keyframes rotate-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotate-spinner {
  animation: rotate-spin 2s linear infinite;
}

This rotates the element through one complete revolution every two seconds.

For accessibility, consider reducing or disabling nonessential motion when the user requests reduced motion:

@media (prefers-reduced-motion: reduce) {
  .rotate-spinner {
    animation: none;
  }
}

Transitions and animations change the rotation over time, while a static rotate() declaration sets a fixed orientation.

Example

This example demonstrates positive and negative rotation angles.

HTML:

<div class="rotate-demo">
  <div class="rotate-demo-item rotate-demo-positive">30deg</div>
  <div class="rotate-demo-item rotate-demo-negative">-30deg</div>
  <div class="rotate-demo-item rotate-demo-quarter">90deg</div>
</div>

CSS:

.rotate-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 45px;
  padding: 55px 30px;
  background-color: #f1f3f5;
}
.rotate-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  background-color: #0066cc;
  color: #ffffff;
  font-weight: bold;
}
.rotate-demo-positive {
  transform: rotate(30deg);
}
.rotate-demo-negative {
  transform: rotate(-30deg);
}
.rotate-demo-quarter {
  transform: rotate(90deg);
}

The first box rotates 30 degrees clockwise, the second rotates 30 degrees counterclockwise, and the third rotates one-quarter turn clockwise in a left-to-right writing direction.

Each box rotates around its center because no custom transform-origin is specified.

Transform Origin Example

This example compares rotation around the center with rotation around the top-left corner.

HTML:

<div class="rotate-origin-demo">
  <div class="rotate-origin-stage">
    <div class="rotate-origin-box rotate-origin-center">Center</div>
  </div>
  <div class="rotate-origin-stage">
    <div class="rotate-origin-box rotate-origin-corner">Top Left</div>
  </div>
</div>

CSS:

.rotate-origin-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  padding: 20px;
  background-color: #f1f3f5;
}
.rotate-origin-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  border: 1px dashed #999999;
}
.rotate-origin-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  background-color: #008577;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}
.rotate-origin-center {
  transform: rotate(45deg);
  transform-origin: center;
}
.rotate-origin-corner {
  transform: rotate(45deg);
  transform-origin: top left;
}

Both boxes rotate 45 degrees, but their positions differ because they rotate around different origins.

The first box rotates around its center, while the second rotates around its top-left corner.

The dashed containers help show how changing the origin affects the visible position of the transformed element.

Common Uses

The rotate() function is useful for changing the orientation of elements and creating visual effects.

For example:

.arrow {
  transform: rotate(90deg);
}
.badge {
  transform: rotate(-10deg);
}
.button:hover {
  transform: rotate(5deg);
}

These declarations demonstrate fixed rotations and a hover-based rotation effect.

Limitations

The rotate() function has several important rules and considerations.

• It requires one valid CSS angle value.
• Unitless nonzero values are invalid.
• It performs a two-dimensional rotation around the Z axis.
• It does not change the element's original layout space.
• Rotated elements can overlap surrounding content or extend outside their containers.
• The default rotation origin is the element's center.
• The order of transform functions affects the final result.
• Rotation also affects text and other content inside the transformed element.
• Repeated or continuous animations should respect reduced-motion preferences.

For example, this is valid:

transform: rotate(45deg);

The following is invalid because the angle has no unit:

transform: rotate(45);

The following is invalid because rotate() accepts only one argument:

transform: rotate(30deg, 60deg);

For three-dimensional rotations, use functions such as rotateX(), rotateY(), rotateZ(), or rotate3d().

Browser Support

The CSS rotate() transform function is Baseline Widely available and is supported by modern versions of Chrome, Edge, Firefox, Safari, and other major browsers.

It does not require vendor prefixes in modern browsers.

For example:

.box {
  transform: rotate(45deg);
}

The function is part of the CSS Transforms specification and has long-established browser support.

The standalone rotate property is a separate feature with a different compatibility history.

For current compatibility information, visit Can I Use? and search for CSS transforms.

Specifications

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

The specification defines two-dimensional rotations and how transform functions are combined.

Related CSS functions include rotate3d(), rotateX(), rotateY(), rotateZ(), translate(), and scale().