CSS rotateX() Function

CSS rotateX() Function

The CSS rotateX() function rotates an element around the horizontal X axis in three-dimensional space.

It is used with the transform property and accepts an angle that determines the amount of rotation. Combined with perspective, it can create tilting panels, flipping cards, and other three-dimensional visual effects.

Syntax

transform: rotateX(angle);

The rotateX() function accepts one angle value.

For example:

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

The function returns a CSS <transform-function> value.

It is equivalent to a rotate3d() rotation with an axis vector of (1, 0, 0).

transform: rotateX(45deg);
transform: rotate3d(1, 0, 0, 45deg);

Both declarations produce the same rotation.

Parameters

The rotateX() function accepts one required parameter.

For example:

transform: rotateX(60deg);

This rotates the element 60 degrees around its horizontal X axis.

Positive, negative, and zero angles are supported. A unitless zero is also accepted where an angle is expected.

How It Works

The X axis runs horizontally across the element. The rotateX() function rotates the element around this axis, causing its top and bottom edges to move in opposite directions through three-dimensional space.

For example:

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

The element tilts around its horizontal axis by 45 degrees.

By default, the axis passes through the center of the element, as determined by transform-origin.

Without perspective, the rotated element is displayed using a flattened projection. Adding perspective makes the nearer and farther portions appear different in size.

The transformation changes the rendered appearance without changing the space originally reserved for the element in the document layout.

Angle Units

The rotateX() function supports four CSS angle units.

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

transform: rotateX(90deg);
transform: rotateX(0.25turn);
transform: rotateX(100grad);
transform: rotateX(1.570796rad);

Degrees are commonly used for tilting effects, while turns are convenient for full rotations and animations.

Positive and Negative Rotations

Positive and negative angles rotate the element in opposite directions around the X axis.

For example:

.positive {
  transform: rotateX(45deg);
}
.negative {
  transform: rotateX(-45deg);
}

With a positive angle, the top edge moves away from the viewer and the bottom edge moves toward the viewer, assuming the default viewing orientation.

A negative angle reverses that movement.

A value of 0deg produces no rotation:

transform: rotateX(0deg);

Angles greater than one full revolution are also valid:

transform: rotateX(450deg);

The final orientation is equivalent to rotateX(90deg), although the additional revolution can affect animation behavior.

Perspective

Perspective creates a sense of depth when an element rotates around the X axis.

The perspective property can be applied to a parent element:

.scene {
  perspective: 600px;
}
.box {
  transform: rotateX(45deg);
}

The parent establishes a perspective view for its transformed children.

Perspective can also be added directly using the perspective() transform function:

.box {
  transform: perspective(600px) rotateX(45deg);
}

Smaller positive perspective distances create stronger depth effects, while larger distances create a flatter appearance.

For example:

.strong-depth {
  transform: perspective(250px) rotateX(45deg);
}
.subtle-depth {
  transform: perspective(1000px) rotateX(45deg);
}

The perspective property and perspective() function have different application rules, so they may produce different results in more complex layouts.

Perspective is optional, but it makes three-dimensional tilting easier to recognize.

Transform Origin

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

By default, the rotation axis passes through the center of the element.

For example:

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

Changing the vertical origin creates different tilting effects.

For example:

.top-hinge {
  transform: rotateX(45deg);
  transform-origin: top center;
}
.bottom-hinge {
  transform: rotateX(45deg);
  transform-origin: bottom center;
}
.custom-origin {
  transform: rotateX(45deg);
  transform-origin: 50% 25%;
}

The first example rotates around the top edge, while the second rotates around the bottom edge.

A third value can specify a Z-axis offset:

.depth-origin {
  transform: rotateX(45deg);
  transform-origin: center center 40px;
}

The third value must be a length, not a percentage.

Changing the origin is useful for creating hinged panels, folding sections, and opening effects.

Backface Visibility

The backface-visibility property controls whether the reverse side of a transformed element is visible when facing the viewer.

For example:

.box {
  transform: rotateX(180deg);
  backface-visibility: hidden;
}

At 180 degrees, the back of the element faces the viewer. With backface-visibility: hidden, the element is not painted from that side.

The default value is visible:

.box {
  transform: rotateX(180deg);
  backface-visibility: visible;
}

With the default setting, the reverse side remains visible, although text may appear mirrored or upside down.

For two-sided card effects, separate front and back elements can be positioned together and assigned different rotations.

Use backface-visibility: hidden when only the face directed toward the viewer should be displayed.

Preserving 3D Space

The transform-style property determines whether an element's transformed descendants retain their three-dimensional positions.

For example:

.scene {
  perspective: 700px;
}
.group {
  transform-style: preserve-3d;
  transform: rotateX(35deg);
}
.group-child {
  transform: translateZ(50px);
}

The preserve-3d value allows the child to remain positioned along the Z axis within the three-dimensional scene.

The default value, flat, flattens descendants into the parent's plane.

Some properties, including certain clipping and opacity settings, can force a flattened rendering context.

For a single element rotated with rotateX(), transform-style: preserve-3d is usually unnecessary.

Combining Transforms

The rotateX() function can be combined with other transform functions.

For example:

.box {
  transform: perspective(600px) rotateX(35deg) translateY(20px);
}

This combines perspective, rotation, and translation.

The order of transform functions matters because the transformations are composed in the order written.

For example:

.first {
  transform: translateY(40px) rotateX(45deg);
}
.second {
  transform: rotateX(45deg) translateY(40px);
}

These declarations generally produce different results.

In the second example, the translation follows the rotated coordinate system, affecting the element's final position in three-dimensional space.

Multiple rotations can also be combined:

.box {
  transform: rotateX(30deg) rotateY(20deg);
}

This applies rotations around both the X and Y axes.

Changing their order can change the resulting orientation.

rotateX() vs. Other Rotation Functions

CSS provides several rotation functions for different axes.

For example, these declarations are equivalent:

transform: rotateX(45deg);
transform: rotate3d(1, 0, 0, 45deg);

Use rotateX() for a rotation around the horizontal axis. Use rotate3d() when the axis must combine multiple directions.

Example

This example demonstrates positive and negative rotations around the X axis.

HTML:

<div class="rotatex-demo">
  <div class="rotatex-demo-stage">
    <div class="rotatex-demo-box rotatex-demo-positive">45deg</div>
  </div>
  <div class="rotatex-demo-stage">
    <div class="rotatex-demo-box rotatex-demo-negative">-45deg</div>
  </div>
  <div class="rotatex-demo-stage">
    <div class="rotatex-demo-box rotatex-demo-steep">70deg</div>
  </div>
</div>

CSS:

.rotatex-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 25px 15px;
  background-color: #f1f3f5;
}
.rotatex-demo-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 140px;
  perspective: 500px;
  border: 1px dashed #999999;
}
.rotatex-demo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 95px;
  background-color: #0066cc;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}
.rotatex-demo-positive {
  transform: rotateX(45deg);
}
.rotatex-demo-negative {
  transform: rotateX(-45deg);
}
.rotatex-demo-steep {
  transform: rotateX(70deg);
}

The first and second boxes rotate in opposite directions, while the third uses a steeper rotation angle.

Each container provides perspective so the depth effect is visible.

Perspective Example

This example compares the same X-axis rotation with and without perspective.

HTML:

<div class="rotatex-perspective-demo">
  <div class="rotatex-perspective-stage rotatex-perspective-flat">
    <div class="rotatex-perspective-box">No Perspective</div>
  </div>
  <div class="rotatex-perspective-stage rotatex-perspective-depth">
    <div class="rotatex-perspective-box">Perspective</div>
  </div>
</div>

CSS:

.rotatex-perspective-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  padding: 25px 15px;
  background-color: #f1f3f5;
}
.rotatex-perspective-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 160px;
  border: 1px dashed #999999;
}
.rotatex-perspective-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 100px;
  padding: 5px;
  background-color: #008577;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  transform: rotateX(55deg);
}
.rotatex-perspective-flat {
  perspective: none;
}
.rotatex-perspective-depth {
  perspective: 300px;
}

Both boxes use rotateX(55deg), but the second container adds perspective.

Without perspective, the box appears compressed vertically. With perspective, the top and bottom portions appear at different depths, creating a more realistic tilted appearance.

Transitions and Animations

The rotateX() function can be animated using CSS transitions and keyframes.

For example, a hover effect:

.rotatex-hover {
  transition: transform 0.4s ease;
}
.rotatex-hover:hover {
  transform: rotateX(25deg);
}

For a continuous X-axis rotation:

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

The animation rotates the element through one complete revolution every three seconds.

A parent element can provide perspective to make the animation appear three-dimensional:

.rotatex-scene {
  perspective: 600px;
}

For accessibility, respect reduced-motion preferences:

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

For interactive effects, transitions are often more appropriate than continuous animations.

Common Uses

The rotateX() function is useful for three-dimensional effects involving vertical tilting or flipping around a horizontal axis.

For example:

.tilted-card {
  transform: perspective(700px) rotateX(15deg);
}
.folding-panel {
  transform-origin: top center;
  transform: rotateX(-60deg);
}
.flipped-element {
  transform: rotateX(180deg);
}

These examples demonstrate a tilted card, a folding panel, and a half-turn around the X axis.

Limitations

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

• It accepts one CSS angle value.
• Nonzero angles require a valid unit such as deg, rad, grad, or turn.
• It rotates only around the X axis.
• Perspective is not automatically applied.
• It does not change the element's original layout space.
• Rotated elements may overlap surrounding content or extend beyond their containers.
• At a quarter-turn, a flat element may appear edge-on and become difficult to see.
• The reverse side may become visible during rotations greater than 90 degrees.
• The order of combined transform functions affects the final result.
• Nonessential animations should respect reduced-motion preferences.

For example, this is valid:

transform: rotateX(45deg);

The following is also valid and produces no rotation:

transform: rotateX(0);

The following is invalid because the nonzero angle has no unit:

transform: rotateX(45);

The following is invalid because the function accepts only one argument:

transform: rotateX(30deg, 60deg);

Use a valid angle and add perspective when a stronger three-dimensional appearance is needed.

Browser Support

The CSS rotateX() 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: rotateX(45deg);
}

A two-dimensional fallback can be provided for older browsers:

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

Browsers that support rotateX() use the second declaration. Browsers that do not recognize it can retain the earlier two-dimensional rotation.

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

Specifications

The rotateX() function is defined in the CSS Transforms Module Level 2 .

The specification defines three-dimensional rotation functions, perspective, and related transform behavior.

Related CSS functions include rotate(), rotate3d(), rotateY(), rotateZ(), and perspective().