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 property."

"rotateX() = rotateX( [ <angle> | <zero> ] ) /* 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 */"

"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 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:"

rotateX() rotates an element around the x-axis in three-dimensional space, producing a vertical tilt that can flip the element backward or forward. The x-axis defines the rotation axis, so the element turns up or down like a pinned hinge. A default rotation can be set with rotateX(0). The function takes a single angle argument, expressed in degrees, turns, radians, or gradians. Positive angles tilt the top of the element toward the back and the bottom toward the front. Negative angles tilt the top toward the viewer and the bottom away from the viewer. rotateX() is a CSS 3D transform function and works best with a 3D view.

Read at CSS-Tricks