css - 计算容器宽度/高度(相对于父容器)的公式

Question

在父容器内设置perspective(关键字:“parallax”)相对于其父容器，用translateZ计算子元素的宽度/高度的公式是什么宽度/高度？

我想创建一个在两个轴上都有视差效果的网站。除了一件事，我能够弄清楚模型所需的一切。 child 的宽度/高度超过 100% 时如何计算？ 由于 parent 的视角和 child 的 translateZ， child 的宽度/高度在视觉上不再与 parent 的宽度/高度对齐。

缩放子元素的公式是:1 + (translateZ * -1)/perspective。但是我找不到宽度/高度的公式。顺便说一句:当 child 的宽度/高度 <= 100% 时一切正常。
但是当 width >= 100% 时，请查看下图的结果(容器具有顶部偏移以使事物可见)。

正确地说，在我的特定情况下，方法是让所有子元素在视觉上具有相同的宽度/高度。

---

在 SASS 中(首选):PEN或 SassMeister
在 CSS 中:PEN

---

可能有帮助的规范链接:
https://www.w3.org/TR/css-transforms-1/#recomposing-to-a-3d-matrix
https://www.w3.org/TR/css-transforms-1/#mathematical-description

---

“Google 搜索”了很多次，但没有找到任何指向正确方向的信息。提前致谢...

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

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

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

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

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

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

.pro {
  background: #333;
  box-shadow: inset 0 0 0 5px orange;
  color: orange;
  font-size: 4em;
  line-height: 1em;
  text-align: center;
}

.pro--2 {
  background: rgba(75, 75, 75, 0.5);
  box-shadow: inset 0 0 0 5px green;
  color: green;
  line-height: 4em;
}

.pro--3 {
  background: rgba(75, 75, 75, 0.5);
  box-shadow: inset 0 0 0 5px white;
  color: white;
  line-height: 7em;
}

<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>

SASS

@mixin  projection($translateZ: 0, $translateX: 0, $translateY: 0, $width: 0, $height: 0, $perspective: $perspective)

  // strip and sanitize units for further calculations
  // units must be "px" for both $translateZ and $perspective
  $unit: unit( $translateZ )
  @if '' != $unit
    $translateZ: $translateZ / ($translateZ * 0 + 1)
    @if 'px' != $unit
      @warn '$translateZ must have "px" as unit!'

  $unit: unit( $perspective )
  @if '' != $unit
    $perspective: $perspective / ($perspective * 0 + 1)
    @if 'px' != $unit
      @warn '$perspective must have "px" as unit!'

  $unit: 0px // yeah - technically this is no unit
  
  // calculate scaling factor
  $scale: 1 + ($translateZ * -1) / $perspective

  // sanitize units for translateX, translateY, translateZ
  $translateZ: $translateZ + $unit
  @if unitless( $translateX )
    $translateX: $translateX + $unit
  @if unitless( $translateY )
    $translateY: $translateY + $unit

  // render css "transform: scale() translate(x, y) translateZ()"
  transform: scale( $scale ) translate($translateX, $translateY) translateZ( $translateZ + $unit )

$width: 110% // 100% works like a charme
$translateZ--1: -3 // "px" will be added in mixin
$translateZ--2: -2
$translateZ--3: -1
$perspective: 1

html, body
  height: 100%
  overflow: hidden
  width: 100%

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

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

.pro--1
  @include projection( $translateZ--1 )
  width: $width

.pro--2
  @include projection( $translateZ--2, 0, 50% )
  width: $width

.pro--3
  @include projection( $translateZ--3, 0, 100% )
  width: $width

Answer 1

您已经解决了您的问题。您的代码完全符合您的要求，现在只是 CSS 布局问题。

https://codepen.io/anon/pen/xLWGzp?editors=0100

由于视角的变化，如果你把所有东西都卡在 x 轴中心之外，所有东西都会开始正确排列:

(我只是在此处添加代码更改，其他所有内容均保持不变)

#projection
    perspective-origin: center top

.pro
    transform-origin: center top

现在一切都安排得更好了，但它仍然有点偏离 - 您可以将 $width 变量更改为 100% 以外的任何值以查看问题(60% 是一个很好的)

所以现在的问题只是由于元素的定位，当您设置 position: absolute 时，它们默认位于左侧，更改宽度并添加缩放和变换，您会得到这个等宽/不等位，所以通过添加将它们居中:

#projection
    position: relative

.pro
    left: 50%
    margin-left: $width * -.5

(此处提供关于为何居中的信息:https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/)

所以现在摇动 $width 仔细检查，我从 20% 到 150% 测试它，它工作正常。