嵌套元素的 CSS 滚动透视图答案

【问题标题】：CSS Scroll Perspective on Nested Elements嵌套元素的 CSS 滚动透视图
【发布时间】：2021-11-25 19:06:05
【问题描述】：

以下代码会产生透视效果，当您滚动时，该效果会改变您查看元素的角度：

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

* {
  height: 100%;
  overflow: hidden;
}

.nesting {
  height: 3000px;
}

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

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

Codepen：https://codepen.io/Davste93/pen/ZEydJeK

然而，这对于现实世界的情况来说不是很实用，因为当您在父元素和转换后的元素之间添加一个元素（参见：嵌套）时，它就会中断：

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

这不就是 preserve-3d 的本意吗？似乎没有任何效果。

有没有办法让 CSS 透视动画在滚动元素之间起作用？

我知道我可以使用 perspective-origin 和 javascript 实现相同的效果，但如果可能的话，我希望将其保留在纯 CSS 中。

【问题讨论】：

我说“不切实际”是因为它使布局、页面上的多个动画元素、组件等变得更加困难——如果你在滚动，比如正文，那就更困难了，但我愿意接受其他想法。
我尝试的第一件事 - 不起作用。有一个 codepen - 你可以在这里看到：codepen.io/Davste93/pen/ZEydJeK
Safari 和 Chrome 似乎都讨厌它
尝试添加perspective: 400px;而不是transform-style
@Greg-- 这增加了视角但破坏了滚动效果。当您滚动时，您查看元素的角度应该会发生变化。在这里查看工作：codepen.io/Davste93/pen/dyRBmBm

标签： html css css-transforms perspective

【解决方案1】：

我在这次旅程中发现了一些事情：

溢出：隐藏中断透视图，即使有preserve-3d
任何嵌套元素都需要preserve-3d
Angular 组件（除非它们具有 display: 块）不会向下传递透视图。

工作示例：


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

* {
  height: 100%;
}

html {
    overflow: hidden;
}

.nesting {
  transform-style: preserve-3d;
}

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

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

https://codepen.io/Davste93/pen/jOwjxOP

【讨论】：