rotateX()

rotateX() 函数定义了一个转换，它可以让一个元素围绕横坐标（水平轴）旋转，而不会对其进行变形。它的结果是一个 <transform-function> 数据类型。

rotateX() 是 CSS3 中的变换函数之一，用于创建三维旋转效果。通过围绕 X 轴旋转元素，可以实现类似翻书或卡片翻转的效果。这个函数在网页设计中常用于创建动态的视觉效果，增强用户交互体验。

使用 rotateX() 时，需要指定旋转角度。角度可以是正值（顺时针旋转）或负值（逆时针旋转）。例如，rotateX(45deg) 表示元素围绕 X 轴顺时针旋转 45 度。

需要注意的是，要使 rotateX() 生效，元素必须设置 transform-style: preserve-3d 属性，这样才能保持三维空间中的变换效果。此外，配合 perspective 属性使用，可以更好地控制三维透视效果，使旋转看起来更加自然。

rotateX() 函数在现代浏览器中得到了广泛支持，包括 Chrome、Firefox、Safari 和 Edge 等主流浏览器。自 2015 年 7 月起，这个功能已经在各大浏览器中稳定可用，开发者可以放心地在项目中使用它来创建丰富的视觉效果。