CSS rotateX()

MamtaWardhani's avatar
MamtaWardhani's avatar
MamtaWardhani
Published Oct 28, 2025
Contribute to Docs

The rotateX() function is a CSS transform function that rotates an element around the x-axis, which runs horizontally through the element. It is primarily used to create 3D rotation effects, especially when combined with perspective.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn CSS

    In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
    • Beginner Friendly.
      6 hours

Syntax

transform: rotateX(angle);

Parameters:

  • angle: A CSS <angle> value (e.g., 45deg, 0.5rad) that specifies the amount of rotation around the x-axis. Using a positive angle results in clockwise rotation (the top moves back, and the bottom moves forward). Using a negative angle causes counter-clockwise rotation (the top moves forward, and the bottom moves back).

Return value:

The rotateX() function returns a <transform-function> value that can be used with the transform property.

Example 1: Tilting a Card Forward

In this example, a card element is rotated forward along the x-axis to create a tilt effect. The HTML code is:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <title>RotateX Card Example</title>
  </head>
  <body>
    <div class="card">Tilted Card</div>
  </body>
</html>

The CSS code is:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}


.card {
  width: 200px;
  height: 120px;
  background-color: #3498db;
  color: white;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateX(30deg);
}

This example results in the following output:

A rectangular card rotated forward along the x-axis at 30 degrees, creating a 3D tilt effect with depth perception.

Example 2: Interactive Flip on Hover

In this example, a card flips forward when hovered over, simulating a 3D interactive effect. The HTML code is:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <title>RotateX Hover Animation</title>
  </head>
  <body>
    <div class="flip-card">Hover Me</div>
  </body>
</html>

The CSS code is:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #ecf0f1;
}


.flip-card {
  width: 150px;
  height: 80px;
  font-size: 18px;
  font-weight: bold;
  background-color: #e74c3c;
  color: white;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease;
}


.flip-card:hover {
  transform: rotateX(180deg);
}

This example results in the following output:

A rectangular card that flips forward 180 degrees along the x-axis when hovered, showing a 3D flip animation effect.

Example 3: Image Panel Stack with 3D Rotation

In this example, multiple images are stacked and rotated along the x-axis for a layered 3D effect. The HTML code is:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <title>3D Image Stack</title>
  </head>
  <body>
    <div class="image-stack">
      <div class="image-panel panel1">1</div>
      <div class="image-panel panel2">2</div>
      <div class="image-panel panel3">3</div>
    </div>
  </body>
</html>

The CSS code is:

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
  background: linear-gradient(120deg, #ff7e5f, #feb47b);
}


.image-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.image-panel {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 18px;
  font-weight: bold;
  border-radius: 6px;
  transition: transform 0.3s ease;
}


.panel1 {
  transform: rotateX(15deg);
}


.panel2 {
  transform: rotateX(30deg);
}


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


.image-panel:hover {
  transform: rotateX(60deg);
}

This example results in the following output:

Three stacked square panels rotated along the x-axis with increasing angles, creating a layered 3D effect; each panel rotates further on hover.

Frequently Asked Questions

1. What is rotateX?

rotateX() is a CSS transform function that rotates an element forward or backward around its horizontal x-axis, creating a 3D rotation effect.

2. What is rotate() in CSS?

rotate() rotates an element around a single 2D axis (the z-axis) in its plane. It is simpler than rotateX() and does not create a 3D effect.

3. How to use rotateX?

Use rotateX(angle) with the CSS transform property. Optionally combine it with perspective to enhance the 3D visual effect. Example:

.element {
  transform: perspective(500px) rotateX(45deg);
}

All contributors

Contribute to Docs

Learn CSS on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn CSS

    In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
    • Beginner Friendly.
      6 hours