嵌套元素场景下CSS滚动透视失效，如何用纯CSS实现对应效果？

纯CSS解决方案 #

透视效果失效的核心原因是中间嵌套层默认会扁平化3D上下文，阻断了父级perspective属性向下传递到目标box元素，按照以下规则修改即可正常运行：

• 给所有位于设置了perspective的父元素和目标box之间的嵌套层，统一添加transform-style: preserve-3d属性，开启3D上下文传递
• 所有中间嵌套层不能设置会触发3D上下文扁平化的属性：包括overflow设为visible以外的值、opacity < 1、设置非默认的filter/backdrop-filter等，这类属性都会强制打断3D上下文传递
• transform-style不具备继承性，如果存在多层嵌套，需要给每一级中间父元素都添加该属性

完整可运行代码示例

<div class="parent"> 
  <div class="nesting">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

html, body {
  height: 100%;
  margin: 0;
}

.parent {
  overflow: scroll;
  perspective: 200px;
  height: 100vh;
}

.nesting {
  height: 3000px;
  transform-style: preserve-3d;
  /* 保持overflow为默认值visible即可，不要设置hidden/scroll/auto */
}

.box {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  border: 5px solid black;
  transform: rotateX(50deg);
}

你原来的代码中全局*选择器设置overflow: hidden是最常见的踩坑点，该设置会给所有元素加上溢出隐藏，直接触发3D上下文扁平化，移除该全局限制仅给需要的元素设置即可。

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