rotateX()

by

rotateX() is a CSS transform function that applies a 3D rotation along the X-axis to an element. The rotation angle is specified in degrees, with positive values rotating clockwise and negative values rotating counterclockwise when viewed from the positive Z-axis.

Basic Usage

  1. Select the element: Target the element you want to rotate using CSS selectors (e.g., #element, .class).
  2. Apply the transform property: Set the transform property to the rotateX() function, followed by the desired rotation angle in degrees.
#element {
  transform: rotateX(45deg);
}

Key Points

  • The rotation axis is perpendicular to the element’s plane, passing through its center.
  • The element’s position remains unchanged during rotation.
  • Combining rotateX() with other transform functions (e.g., translate, scale) can create complex 3D effects.

Examples

  • Rotating an image 45 degrees clockwise:
img {
  transform: rotateX(45deg);
}
  • Rotating a text element 30 degrees counterclockwise:
p {
  transform: rotateX(-30deg);
}
  • Creating a 3D card effect:
.card {
  transform: rotateX(15deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

Additional Considerations

  • Browser compatibility: rotateX() is widely supported across modern browsers. For older browsers, consider using a CSS3 fallback or a JavaScript-based solution.
  • Performance: Excessive use of 3D transforms can impact performance, especially on older devices or with complex animations. Optimize your code and consider using hardware acceleration where possible.
  • Accessibility: Ensure that 3D effects are accessible to users with disabilities. Provide alternative text descriptions for images and consider using ARIA attributes to enhance accessibility.