rotateX()
CSS的rotateX()函数是实现三维变换的关键工具，它使元素围绕X轴（垂直轴）旋转，产生向后或向前的倾斜翻转效果。要启用自然的3D透视感，必须在其父容器上设置perspective属性，并通常结合transform-style: preserve-3d以保持子元素在三维空间中的渲染。rotateX()接受角度值参数，正值使元素顶部向后倾斜，负值则向前倾斜。该函数常用于构建交互式UI组件，例如实现点击或悬停时前后翻转的卡片效果，此时需配合backface-visibility: hidden隐藏背面。此外，它能与其他变换函数如rotateY()组合，创建复杂的多轴旋转动画，如3D加载指示器。通过调整transform-origin属性，还可以自定义旋转的轴心点（如从顶部边缘旋转），从而制作出如手风琴内容向下展开的错落效果。该特性在所有现代浏览器中均获得良好支持。