rotateX()

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: .demo-element { transform: rotateY(var(--deg)); transition: transform 0.3s ease; } CodePen Embed Fallback The rotateX() function is defined in the CSS Transforms Module Level 2 specification. Syntax rotateX() = rotateX( [ | ] ) Arguments /* angle in degrees */ rotateX(45deg) /* rotates 45 degrees backwards */ rotateX(-90deg) /* rotates 90 degrees forwards */ /* angle in turns */ rotateX(0.5turn) /* rotates 180 degrees (half a full turn) */ rotateX(1turn) /* Rotates a full 360-degree turn */ /* angle in radians */ rotateX(1.57rad) /* Approximately 90 degrees */ /* angle in gradians */ rotate(200grad) /* rotates 180 degrees */ The rotateX() function takes a single argument, which defines how much the element is rotated around its vertical axis. : values like 45deg , 0.5turn , -90deg , 1.57rad , etc. can be passed. A positive angle tilts the top of the element toward the back and the bottom toward the front. While a negative angle does otherwise: it tilts the element’s top towards you, and its bottom away from you. The type can be one of four units: deg : One degree is 1/360 of a full circle. grad : One gradian is 1/400 of a full circle. rad : A radian is the length of a circle’s diameter around the shape’s arc. One radian is 180deg , or 1/2 of a full circle. One full circle is 2π radians, which is equal to 6.2832rad or 360deg . turn : One turn is one full circle. So, halfway around a circle is equal to .5turn , or 180deg . Setting up