rotateX() | CSS-Tricks

The CSS rotateX() function rotates an element around the x-axis in a three-dimensional space. Specifically, it vertically flips the element, making it tilt backward or forward, depending on the angle set. It is one of many transform functions used in the transform property.
The x-axis is the axis of rotation, so the element turns vertically. Imagine a pin is stuck to the left side of an element and it can only turn up or down.
In the demo below, rotateX(0) is given as the element’s default rotation:
The rotateX() function is defined in the CSS Transforms Module Level 2 specification.
The rotateX() function takes a single <angle> argument, which defines how much the element is rotated around its vertical axis.
The <angle> type can be one of four units:
rotateX() is part of the CSS 3D transform functions, so it’s better represented in a 3D view. For rotateX() to produce a visible 3D effect, you need to set the perspective property on the parent element. The perspective property determines how the element is projected, adding depth to the element and making it look natural and 3D.
In this demo, we have two sliders to control the rotateX() degree and perspective property.
In the absence of perspective, the element looks oddly skewed and ugly.
It’s also worth setting transform-style to preserve-3d, which determines if that element’s children are positioned in 3D space or flattened.
One of the most popular uses of rotateX() is creating flip cards that reveal content on the back when clicked or hovered. You can use this technique for pricing tables, profile cards, or interactive galleries.
To set the stage and give the card a projection value and 3D presence, we set the perspective and preserve-3d styles on the parent elements.
Then we position the front and back faces of the card absolutely within the container while setting backface-visibility to hidden:
Next, we pre-rotate the back face by 180 degrees, so it is ready to be revealed when the card flips
And, finally, we flip the card when the parent is :hover-ed:
We can also create engaging loading indicators with the rotateX() function..
In this example, we’re not only using the rotateX() function, but we’re combining it with the rotateY() function for a two-axis rotation animation. By continuously rotating an element horizontally and vertically, we create a 3D spinning effect.
Once again, we give the element’s parent a perspective:
Then, we apply the animation to the element using the CSS animation shorthand property.
Next, we define the keyframe, which dictates how the element rotates from one point to another.
The order in which the transform functions are defined is important. The effect of the first function comes to life before the second, so at 25% the element flips halfway horizontally before the vertical flip, and the animation is so smooth you hardly notice it.
Let’s skip the boring accordion component content reveal animation and make ours a bit interesting.
We can enhance traditional accordions by adding a subtle rotateX() rotation when items expand or collapse, creating a more staggered fall effect that further engages the user and improves the experience, rather than the simple slide-down-and-back-up animation.
Once again, as usual, we set the perspective on the parent
Then, we define the transform and transform-origin. Since we want the .accordion-content to fall toward the user, we use a negative 90° angle to shift the element out of the user’s view.
Also, we can change the default rotation axis from the center to the top using transfom-origin: top;
The transform-origin:top ensures the rotation occurs from the top edge, making it look like a door opening downward, while rotateX(-90deg) makes the content appear to unfold into view.
As the accordion opens, the .accordion-content element falls in a staggered manner to 0 degrees, which is the default position.
By default, the rotateX() function rotates an element around its center. However, you can change this rotation axis using the CSS transform-origin property. transform-origin lets you change the point of origin of any transform function, so rather than being restricted to center, you can use top center, top right, bottom left, or even percentages and lengths.
The CSS rotateX() function is defined in the CSS Transforms Module Level 2 draft.
The rotateX() function has baseline support on all modern browsers.
Join our community of front-end nerds!
Andy Clarke shows you how to create designs that people recognize and remember in his brand-new e-book, Standout Designs for the Web. Pre-order it today!
Join our community of front-end nerds! You'll get into the Discord server and member-only perks and free swag.
Sign up to get front-end roundups, browser updates, and exclusive content sent to your inbox bi-weekly.
Get your t-shirts, prints, stickers, and yes, even mousepads at the brand-spankin' new CSS-Tricks store, now open.
CSS-Tricks is powered by a small team of real-life humans.
Handwritten. Twice a month. No spam. See past issues →