rotateY() - Y轴旋转（3D）

语法说明

transform: rotateY(angle);

• angle - 旋转角度
• 正值：右侧向后旋转（远离你）
• 负值：右侧向前旋转（靠近你）
• 需要配合 perspective 属性才能看到 3D 效果

示例 1：向右翻转 60 度

rotateY(60deg) 让元素右侧向后倾斜

.container {
  perspective: 800px;
}

.box {
  transform: rotateY(60deg);
}

示例 2：完整翻转

rotateY(180deg) 完全翻转元素，像翻书一样

.box {
  transform: rotateY(180deg);
  /* 左右翻转 180 度 */
}

示例 3：连续旋转

rotateY(360deg) 完整旋转一圈

.box {
  transform: rotateY(360deg);
  transition: transform 2s;
}

常见应用场景