CSS动画transform:rotateY()不生效 仅translateY正常问题

你的rotateY() 3D旋转效果未正常生效，核心原因是3D渲染上下文被中间层扁平化：

• 你在.header上设置了perspective透视属性，但作为动画元素（h1/p/button）直接父级的.banner元素，默认transform-style属性值为flat，会将所有子元素的3D变换强制拍平到2D平面渲染，直接导致绕Y轴的3D旋转效果丢失，只剩位移动画可见。
• 另外你当前设置的perspective: 100rem（约1000px视距）数值偏大，透视效果较弱，哪怕3D渲染正常，20度的旋转视觉差也不够明显，容易误以为效果没生效。

只需要修改两处CSS即可：

1. 给.banner选择器添加transform-style: preserve-3d属性，开启3D空间保留，让子元素的3D变换正常渲染
2. 适当调小.header上的perspective数值（比如改成60rem即600px），强化3D透视的视觉效果

修改后的对应CSS代码如下：

.header{
  width: 100%;
  height: 100vh;
  position: relative;
  perspective: 60rem; /* 调小视距，增强透视效果 */
  overflow: hidden;
}

.banner{
  position: absolute;
  top: 30%;
  left: 15%;
  transform-style: preserve-3d; /* 新增：保留子元素3D变换空间 */
}

如果你预期的是元素在2D平面上的轻微倾斜旋转（而非3D前后翻转效果），那是你用错了变换函数：

• rotateY()是绕垂直Y轴的3D翻转，需要透视属性配合才能看到效果
• 平面旋转请使用rotate()（即rotateZ()），不需要透视支持，直接写角度就能看到效果，比如把关键帧里的rotateY(-20deg)改成rotate(-5deg)就能看到平面倾斜的入场效果。

内容的提问来源于stack exchange，提问作者gamer beast