CSS中没有rotateY()函数，正确写法是rotate3d(0,1,0,180deg)，需配合transform-style:preserve-3d、perspective及backface-visibility:hidden才能实现立体翻转效果。
为什么 transform: rotateY() 单独写不生效
直接写 transform: rotateY(180deg) 会完全没反应——因为 CSS 中没有 rotateY() 这个函数，正确写法是 rotateY() 属于 rotate3d() 的简写形式，必须配合 transform-style: preserve-3d 和启用 3D 渲染上下文才起作用。浏览器默认把元素扁平化渲染，不开启 3D 上下文时，所有 z 轴操作（包括 rotateY）都会被忽略。
常见错误现象：rotateY 写对了但元素只是原地不动，或者只看到“一闪”，其实是翻转发生在屏幕平面内而非纵深方向。
- 必须给父容器设置
transform-style: preserve-3d - 父容器不能有
overflow: hidden（会剪裁 3D 空间中的翻转过程） - 建议同时加
perspective（比如perspective: 1000px），否则翻转看起来像平面旋转，缺乏立体感
翻转动画需要两个面：front 和 back
纯单面元素翻转后会变“透明”或消失，因为背面默认不可见。真实翻转效果依赖两个叠在一起的面：正面（front）和反面（back），通过 backface-visibility: hidden 控制哪一面在何时可见。
典型结构是用一个包裹容器（.card）作为 3D 变换锚点，内部两个子元素分别代表正反面，并各自设置初始旋转：
立即学习“前端免费学习笔记（深入）”；
.card {
perspective: 1000px;
}
.card-inner {
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
.card-front, .card-back {
backface-visibility: hidden;
}
.card-front {
transform: rotateY(0deg);
}
.card-back {
transform: rotateY(180deg);
}
触发翻转时，只需给 .card-inner 设置 transform: rotateY(180deg)，正面转走、反面转进，视觉上就是“翻过来”。
rotateY() 的角度与方向容易搞反
rotateY(180deg) 是向内翻（像书本合上），rotateY(-180deg) 是向外翻（像书本打开），实际效果取决于你希望用户感知的“翻转方向”。但更关键的是：翻转是否“自然”，往往取决于初始状态是否设置了正确的 transform-origin。
- 默认
transform-origin: 50% 50% 0（中心点），适合卡片类翻转 - 如果想模拟门 hinge 效果，改成
transform-origin: left center或right center - 注意：修改
transform-origin必须写在transform前面，否则可能被覆盖（尤其在使用 CSS 预处理器或框架时）
移动端 Safari 的兼容性坑
iOS 15.4 之前，Safari 对 backface-visibility: hidden 在某些嵌套层级下失效，导致翻转时正反面同时显示或闪烁。这不是 bug，而是硬件加速策略差异。
绕过方式有限但有效：
- 给
.card-front和.card-back都加上-webkit-transform: translateZ(0)强制 GPU 加速 - 避免在
position: fixed容器内做 3D 翻转（iOS 会降级为软件渲染） - 不要用
will-change: transform过度优化——在旧版 Safari 上反而引发重绘异常
最稳妥的做法是：先确保 perspective + preserve-3d + backface-visibility 三者齐全，再针对性加 iOS hack，而不是一上来就堆优化指令。
