Safari浏览器transform:rotateY()过渡动画兼容性问题求助

针对你遇到的Safari中transform: rotateY(180deg)搭配transition出现的翻转bug，试试以下几个方案：

• 强制触发GPU硬件加速
  Safari对3D变换的渲染优化逻辑和其他浏览器有差异，给卡片及正反面元素添加backface-visibility: hidden和transform-style: preserve-3d，同时可以加上transform: translateZ(0)强制开启GPU渲染，避免过渡时的渲染异常。示例Sass代码：

  .card {
    position: relative;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform 0.6s ease;
    transform: rotateY(0deg); // 明确初始状态
  
    &.flipped {
      transform: rotateY(180deg);
    }
  }
  
  .card-front, .card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  .card-back {
    transform: rotateY(180deg);
  }
  

• 锁定过渡属性范围
  避免使用transition: all ...这种全局过渡，明确只针对transform属性设置过渡，减少属性冲突概率，比如把过渡规则改成transition: transform 0.6s ease。

• 明确初始变换状态
  给未翻转的卡片明确设置transform: rotateY(0deg)，不要依赖浏览器默认的初始值，确保Safari能正确计算过渡的起始和结束状态。

• 调整层级避免渲染混乱
  给卡片正反面设置明确的z-index，比如正面z-index: 2，背面z-index: 1，翻转后可以通过JS调整或者利用3D变换的层级特性，避免Safari渲染时出现元素重叠或闪烁问题。

内容的提问来源于stack exchange，提问作者Nikita Kozlov