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

Question

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

要求

• CSS only parallax
• 父图层必须具有宽度/高度== 100vw / 100vh
• 子图层必须具有宽度/高度＆gt; 100vw / 100vh
• 子图层必须在视觉上与父图层宽度对齐100％
  • 到目前为止，子图层在技术上确实有100％的父级宽度，但是由于perspective它们在视觉上看起来不是100％的父级宽度
• 子图层（第一个除外）必须具有相对于其父
的顶部偏移
• 结果必须基于计算以获得最大的灵活性
• 必须是跨浏览器的（至少是最新版本的专业）

到目前为止我做了什么

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

工作模拟示例（jQuery）

在JavaScript中，很容易实现我正在寻找的东西。 So here is a PEN 模拟我想用CSS模仿的效果。

已知问题

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

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

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

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

我不是百分之百肯定我已经确切地知道你的目标，但我至少向你迈进了一步。在纯{css视差网站上的this article中，有关使用perspective-origin-x: 100%和transform-origin-x: 100%解决与webkit相关的错误的更新。

如果我在x和y方向上将这个应用到你当前的模型案例中，那么我最终只会更改#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