水平 CSS 仅视差效果，层数大于 100vw

Question

如何使用水平 CSS 仅视差效果引导站点？

要求

• 仅 CSS 视差
• 父层必须具有宽度/高度 == 100vw/100vh
• 子层的宽度/高度必须 > 100vw/100vh
• 子层必须在视觉上与父层宽度 100% 对齐
  • 现在子层在技术上确实具有父级宽度的 100%，但由于 perspective，它们在视觉上似乎没有占用父级宽度的 100%
• 子层（第一个除外）必须具有相对于其父层的顶部偏移量
• 结果必须基于计算才能获得最大的灵活性
• 必须跨浏览器可靠（至少是最新版本的专业）

到目前为止我做了什么

其实这个问题是follow-up question。
这是我当前在SASS 或CSS 中的模型状态的笔。

工作模拟示例 (jQuery)

在 JavaScript 中实现我想要的效果非常简单。 So here is a PEN 模拟了我想用 CSS 模拟的效果。

已知问题

我现在最关心的问题是，浏览器似乎以不同的方式呈现此场景。请参阅滚动到右下角的浏览器窗口（chrome vs ff）的屏幕截图。但我希望可以避免这种情况。

那里有很多视差教程。为什么会有所不同？

实际上我研究了很多，但没有找到一个描述如何实现水平视差（意味着子层的宽度> 100vw）。当然有horizontal parallax scroll tuts。但它们都有一个共同点：子层宽度总是

html,
body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

body {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

#projection {
  -webkit-perspective: 1px;
  perspective: 1px;
  -webkit-perspective-origin: 0 0;
  perspective-origin: 0 0;
  height: 100%;
  overflow: auto;
  width: 100%;
}

.pro {
  -webkit-transform: scale(1) translate(0px, 0px) translateZ(0px);
  transform: scale(1) translate(0px, 0px) translateZ(0px);
  height: 100%;
  position: absolute;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 100%;
}

.pro--1 {
  -webkit-transform: scale(4) translate(0px, 0px) translateZ(-3px);
  transform: scale(4) translate(0px, 0px) translateZ(-3px);
  width: 110%;
}

.pro--2 {
  -webkit-transform: scale(3) translate(0px, 1em) translateZ(-2px);
  transform: scale(3) translate(0px, 1em) translateZ(-2px);
  width: 110%;
}

.pro--3 {
  -webkit-transform: scale(2) translate(0px, 2em) translateZ(-1px);
  transform: scale(2) translate(0px, 2em) translateZ(-1px);
  width: 110%;
}

.pro {
  background: rgba(0, 0, 0, 0.33);
  box-shadow: inset 0 0 0 5px orange;
  color: orange;
  font-size: 4em;
  line-height: 1em;
  text-align: center;
}

.pro--2 {
  box-shadow: inset 0 0 0 5px green;
  color: green;
}

.pro--3 {
  box-shadow: inset 0 0 0 5px blue;
  color: blue;
}

<div id="projection">
  <div class="pro pro--1">pro--1</div>
  <div class="pro pro--2">pro--2</div>
  <div class="pro pro--3">pro--3</div>
</div>

Answer 1

我不能 100% 确定我已经准确地得到了你的目标，但我至少为你向前迈出了一步。在纯 CSS 视差网站上的 this article 中，有一个关于使用 perspective-origin-x: 100% 和 transform-origin-x: 100% 解决 webkit 相关错误的更新。

如果我在 x 和 y 方向上将它应用到您当前使用 sass 的模型案例，我最终将 #projection 和 .pro 更改为如下所示：

#projection
  perspective: $perspective + 0px
  perspective-origin: 100% 100%
  height: 100%
  overflow: auto
  width: 100%

.pro
  @include projection()
  height: 100%
  position: absolute
  transform-origin: 100% 100%
  transform-style: preserve-3d
  width: 100%

并且视差行为开始看起来更像我的预期。这是最后一支笔：https://codepen.io/kball/pen/qPbPWa/?editors=0100