如何用水平引导网站仅 CSS 视差效果?

要求

• 仅 CSS 视差
• 父层必须具有宽度/高度 == 100vw/100vh
• 子层的宽度/高度必须 > 100vw/100vh
• child layers must visually align 100% with parent layers width
  • 到目前为止，从技术上讲，子层确实具有父层宽度的 100%，但由于perspective它们在视觉上似乎并没有占据父级宽度的 100%
• 子层（第一个除外）必须具有相对于其父层的顶部偏移量
• 结果必须基于计算才能具有最大的灵活性
• 必须是跨浏览器可靠的（至少是专业的最新版本）

到目前为止我做了什么

其实这个问题是一个后续问题 https://stackoverflow.com/questions/45578101/formular-to-calculate-width-height-relative-to-parent-of-container-with-transl.
这是一个 PEN，其中我当前的模型状态为SASS https://codepen.io/elstermann/pen/EvWEyb?editors=0100 or CSS https://codepen.io/elstermann/pen/WEdqQO?editors=0100.

工作模拟示例 (jQuery)

在 JavaScript 中，实现我想要的东西非常简单。所以这里有一支笔 https://codepen.io/elstermann/pen/gxzeXY?editors=0100它模拟了我想用 CSS 模仿的效果。

已知问题

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

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

实际上我研究了很多，但没有发现甚至没有一个描述如何实现水平视差（意味着子层的宽度> 100vw）。当然有水平视差滚动图 http://keithclark.co.uk/articles/practical-css-parallax/horizontal-scroll/在那里。但它们都有一个共同点：子层宽度始终

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>

我不能 100% 确定我已经完全达到了您的目标，但我至少为您向前迈出了一步。在本文 http://keithclark.co.uk/articles/pure-css-parallax-websites/在纯 CSS 视差网站上，有一个关于通过使用解决 webkit 相关错误的更新perspective-origin-x: 100% and transform-origin-x: 100%.

如果我用 sass 将其在 x 和 y 方向上应用到当前的模型案例中，我最终会改变#projection and .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 https://codepen.io/kball/pen/qPbPWa/?editors=0100