公式，用于计算带有透视图的父容器内部带有translateZ的容器的宽度/高度(相对于父容器) [英] formular to calculate width/height (relative to parent) of container with translateZ inside of parent container with perspective

问题描述

我想创建一个在两个轴上都具有视差效果的站点.除了一件事情，我能够弄清我的模型所需的一切.大于100％时如何计算孩子的宽度/高度. 由于父母的观点和孩子的平移，孩子的宽度/高度在视觉上不再与父母的宽度/高度一致.

I'd like to create a site with parallax effect on both axis. I was able to figure out everything i need for my mockup except one thing. How to calculate the childrens widths/heights when its above 100%. Because of parents perspective and childrens translateZ the childrens widths/heights visually don't align with parents width/height anymore.

缩放子元素的公式为:1 + (translateZ * -1) / perspective.但是我找不到宽度/高度的公式.顺便说一句:当孩子的宽度/高度小于等于100％时，一切正常.
但是，当 width> = 100％(容器的顶部偏移使内容可见)时，请在下图上看到结果.

The formular to scale the child elements is: 1 + (translateZ * -1) / perspective. But i was not able to find a formular for width/height. BTW: When childrens widths/heights <= 100% everything works fine.
But see the result on the image below when width >= 100% (containers have top offset to make things visible).

要正确，在我的特殊情况下，方法是让所有子元素在视觉上都具有相同的宽度/高度.

在SASS中(首选): PEN 或 PEN

in SASS (preferred): PEN or SassMeister
in CSS: PEN

规格说明中的链接可能会有所帮助:
https://www.w3.org/TR/css-transforms-1/#recomposedto-a-3d-matrix
https://www.w3.org/TR/css-transforms- 1/#数学描述

links from the specs that could help:
https://www.w3.org/TR/css-transforms-1/#recomposing-to-a-3d-matrix
https://www.w3.org/TR/css-transforms-1/#mathematical-description

"Googled"很多，但没有找到任何指向我正确方向的东西.预先感谢...

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>

@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

推荐答案

使用设置了透视图的父容器内部的带有transformZ的子元素的宽度/高度的公式为:
$ scale = 1 + (translateZ * -1) / perspective.

The formular to calculate the widths/heights of child elements with translateZ inside of parent container with set perspective is:
$scale = 1 + (translateZ * -1) / perspective.

将此公式放置在transform: scale( $scale )的位置.
perspective是父透视图值，而translateZ也是元素transformZ值.参见底部的片段或 SASS样机你喜欢.

Where to throw this formular at transform: scale( $scale ).
perspective is parents perspective value and translateZ is elements translateZ value as well. See snippet at the bottom or SASS mockup as you like.

实际上答案是在问题中给出的！
尽管这是对所提问题的正确答案，但这根本无法解决我的特定问题，因此

So actually the answer was given in the question!
While this is the correct answer to the asked question this didn't solve my specific problem at all so here is a follow-up-question.

信用: @Trolleymusic 至少与

Credits: @Trolleymusic who at least opened my eyes somehow with his answer.

CSS示例:

/* formular: 1 + (translateZ * -1) / perspective */

#parent {
  perspective: 10px;
}

.child--1 { /* 1 + (-100 * -1) / 10 */
  transform: translateZ(-100px) scale( 11 );
}

.child--2 { /* 1 + (-200 * -1) / 10 */
  transform: translateZ(-200px) scale( 21 );
}

.child--3 { /* 1 + (1 * -1) / 10 */
  transform: translateZ(1px) scale( 0.9 );
}

这篇关于公式，用于计算带有透视图的父容器内部带有translateZ的容器的宽度/高度(相对于父容器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！