rotateX() - X轴旋转（3D）
围绕 X 轴旋转元素，产生上下翻转的 3D 效果
语法说明
transform: rotateX(angle);- angle - 旋转角度
- 正值：顶部向后旋转（远离你）
- 负值：顶部向前旋转（靠近你）
- 需要配合 perspective 属性才能看到 3D 效果
示例 1：向后翻转 60 度
rotateX(60deg) 让元素顶部向后倾斜
60°
.container {
perspective: 800px;
}
.box {
transform: rotateX(60deg);
}示例 2：完整翻转
rotateX(180deg) 完全翻转元素
180°
.box {
transform: rotateX(180deg);
/* 上下翻转 180 度 */
}示例 3：向前翻转
使用负值让顶部向前旋转
-45°
.box {
transform: rotateX(-45deg);
/* 顶部向前倾斜 */
}提示：rotateX 常用于上下翻转效果，配合 perspective 可以创建逼真的 3D 动画