WebKit浏览器中rotateY()结合perspective渲染异常问题

核心原因 #

WebKit（移动端Safari、移动端Chrome）对带有overflow: hidden或border-radius的容器存在特殊渲染限制：这类容器会强制创建扁平化渲染上下文，直接破坏内部的3D变换空间，导致perspective无法传递给子元素——即使浏览器能识别CSS属性，也无法渲染出正确的3D效果。

解决方法 #

方法1：拆分透视容器与裁剪容器 #

将perspective属性从带有overflow: hidden/border-radius的.container中移除，放到一个无这些属性的外层容器中，确保3D空间不受扁平化上下文影响：

body {
  background: black;
  padding: 20px;
}

/* 新增外层透视容器 */
.perspective-wrap {
  perspective: 300px;
}

.container {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  /* 移除原perspective */
}

.border, .door {
  border: 8px solid white;
  width: 120px;
  height: 120px;
  border-radius: 16px;
}

.border {
  position: relative;
}

.door {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(80deg);
  transform-origin: left;
  /* 确保3D变换上下文保留 */
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

<div class="perspective-wrap">
  <div class="container">
    <div class="border"></div>
    <div class="door"></div>
  </div>
</div>

方法2：直接在变换元素上应用perspective #

如果不想新增外层容器，可以将perspective()函数直接整合到.door的transform属性中，绕开容器的扁平化限制：

.door {
  position: absolute;
  top: 0;
  left: 0;
  /* 将perspective直接嵌入transform */
  transform: perspective(300px) rotateY(80deg);
  transform-origin: left;
  transform-style: preserve-3d;
}

额外注意事项 #

• 无需添加-webkit-前缀：现代WebKit内核浏览器（Safari 13+、移动端Chrome）已支持无前缀的transform、perspective等属性。
• 避免在同一个容器上同时使用perspective和overflow: hidden/border-radius：这是WebKit的长期渲染特性，并非Bug，而是为了优化性能的设计。
• 若需要动画效果，确保transition或animation作用在transform属性上，避免触发重绘。

内容的提问来源于stack exchange，提问作者Christopher Oka