解决苹果设备上3D变换元素穿透父元素的问题

这个问题是iOS Safari的WebKit渲染机制导致的：当父元素应用了2D transform（比如你的section用了translateY(10px)），它会创建一个带裁剪边界的合成层，子元素的3D变换超出这个边界的部分会被强制裁切，哪怕子元素设置了z-index或者preserve-3d也无效。

下面是几种可行的解决办法：

方案1：替换父元素的2D transform为非transform属性（最直接） #

如果业务允许，把父元素的transform: translateY(10px)换成margin-top: 10px，这样父元素不会触发合成层裁剪，子元素的3D变换就能正常显示：

section {
  background:grey;
  padding:20px;
  margin-top:10px; /* 替换原有的transform */
}
a {
  display:inline-block;
  position:relative;
  z-index:1;
  background:red;
  color:#ffffff;
  padding:20px;
  transform:rotateY(45deg);
  transform-style:preserve-3d;
}

方案2：给父元素添加3D变换属性，进入3D渲染上下文 #

如果必须保留父元素的transform，可以给它添加一个不影响布局的3D变换（比如translateZ(0)），同时开启transform-style: preserve-3d，让父元素的合成层支持3D空间，这样子元素的3D变换就不会被裁切：

section {
  background:grey;
  padding:20px;
  transform: translateY(10px) translateZ(0); /* 添加translateZ(0) */
  transform-style: preserve-3d; /* 开启3D上下文 */
}
a {
  display:inline-block;
  position:relative;
  z-index:1;
  background:red;
  color:#ffffff;
  padding:20px;
  transform:rotateY(45deg);
  transform-style:preserve-3d;
}

方案3：调整父元素的裁剪规则（兜底方案） #

如果上面两种方法都不适用，可以尝试给父元素添加overflow: visible，但注意这个方法在某些iOS版本下可能不生效，因为合成层的裁剪是硬件渲染层面的：

section {
  background:grey;
  padding:20px;
  transform:translateY(10px);
  overflow: visible; /* 尝试关闭裁剪 */
}

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