rotateX() is a CSS transform function that rotates an element around the x-axis in three-dimensional space, creating vertical flipping effects.
- •The function accepts angle arguments in deg, turn, rad, or grad units, with positive angles tilting the top backward and negative angles tilting it forward
- •Setting the perspective property on parent elements is essential to achieve visible 3D effects
- •The transform-origin property allows developers to change the rotation axis from the default center point
- •Common use cases include flip cards for pricing tables, 3D loading spinners combining rotateX() with rotateY(), and staggered accordion animations
- •Browser support is baseline across all modern browsers
This summary was automatically generated by AI based on the original article and may not be fully accurate.
CSS-Tricks