公式计算 width/height(相对于 parent)具有透视的 parent 容器内带有 translateZ 的容器
formular to calculate width/height (relative to parent) of container with translateZ inside of parent container with perspective
计算 child 元素的 widths/heights 的公式是什么 translateZ
在 parent 容器内 perspective
(关键字:“视差") 相对于其 parents width/height?
我想创建一个在两个轴上都有视差效果的网站。除了一件事,我能够弄清楚模型所需的一切。如何计算 childrens widths/heights 当它超过 100% 时。 由于 parent 的视角和 childrens translateZ childrens widths/heights 在视觉上与 parents width/height 了。
缩放 child 个元素的公式为:1 + (translateZ * -1) / perspective
。但是我找不到 width/height 的公式。顺便说一句:当 childrens widths/heights <= 100% 一切正常时。
但是当 width >= 100% 时,请看下图的结果(容器有顶部偏移以使事物可见)。
正确地说,在我的特定情况下,方法是让所有 child 元素在视觉上具有相同的 widths/heights.
in SASS(首选):PEN or SassMeister
in 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
我稍微更改了样式,使内容更加明显。
结果对我来说似乎还可以。可能是我误会了什么?
html, body {
height: 100%;
overflow: hidden;
width: 100%;
}
#projection {
perspective: 1px;
perspective-origin: 0 0;
height: 50%;
overflow: visible;
width: 50%;
margin-left: 50px;
background-color: grey;
}
.pro {
transform: scale(1) translate(0px, 0px) translateZ(0px);
height: 50%;
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, 120%) translateZ(-2px);
width: 110%;
}
.pro--3 {
transform: scale(2) translate(0px, 240%) translateZ(-1px);
width: 110%;
}
.pro--1 {
background: rgba(0, 0, 75, 0.5);
color: blue;
line-height: 1em;
text-align: center;
}
.pro--2 {
background: rgba(0, 75, 0, 0.5);
color: green;
line-height: 4em;
}
.pro--3 {
background: rgba(75, 0, 0, 0.5);
color: red;
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>
您已经解决了您的问题。您的代码完全符合您的要求,现在只是 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
它们默认位于左侧时,更改宽度并添加缩放和变换,你会得到这个 equal-width/not-equal-position,所以通过添加:
将它们居中
#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%
测试了它,它工作正常。
计算 widths/heights 的 child 元素的 widths/heights 元素在 parent 容器内设置透视的 translateZ 的公式是:
$scale = 1 + (translateZ * -1) / perspective
.
在 transform: scale( $scale )
的什么地方抛出这个公式。
perspective
是 parent 的透视值,translateZ
也是元素的 translateZ 值。请参阅底部的 片段 或 SASS mockup。
原来问题里已经给出答案了!
虽然这是所提问题的正确答案,但这根本没有解决我的具体问题,所以 here is a follow-up-question.
致谢:@Trolleymusic who at least opened my eyes somehow with .
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 );
}
计算 child 元素的 widths/heights 的公式是什么 translateZ
在 parent 容器内 perspective
(关键字:“视差") 相对于其 parents width/height?
我想创建一个在两个轴上都有视差效果的网站。除了一件事,我能够弄清楚模型所需的一切。如何计算 childrens widths/heights 当它超过 100% 时。 由于 parent 的视角和 childrens translateZ childrens widths/heights 在视觉上与 parents width/height 了。
缩放 child 个元素的公式为:1 + (translateZ * -1) / perspective
。但是我找不到 width/height 的公式。顺便说一句:当 childrens widths/heights <= 100% 一切正常时。
但是当 width >= 100% 时,请看下图的结果(容器有顶部偏移以使事物可见)。
正确地说,在我的特定情况下,方法是让所有 child 元素在视觉上具有相同的 widths/heights.
in SASS(首选):PEN or SassMeister
in 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
我稍微更改了样式,使内容更加明显。
结果对我来说似乎还可以。可能是我误会了什么?
html, body {
height: 100%;
overflow: hidden;
width: 100%;
}
#projection {
perspective: 1px;
perspective-origin: 0 0;
height: 50%;
overflow: visible;
width: 50%;
margin-left: 50px;
background-color: grey;
}
.pro {
transform: scale(1) translate(0px, 0px) translateZ(0px);
height: 50%;
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, 120%) translateZ(-2px);
width: 110%;
}
.pro--3 {
transform: scale(2) translate(0px, 240%) translateZ(-1px);
width: 110%;
}
.pro--1 {
background: rgba(0, 0, 75, 0.5);
color: blue;
line-height: 1em;
text-align: center;
}
.pro--2 {
background: rgba(0, 75, 0, 0.5);
color: green;
line-height: 4em;
}
.pro--3 {
background: rgba(75, 0, 0, 0.5);
color: red;
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>
您已经解决了您的问题。您的代码完全符合您的要求,现在只是 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
它们默认位于左侧时,更改宽度并添加缩放和变换,你会得到这个 equal-width/not-equal-position,所以通过添加:
#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%
测试了它,它工作正常。
计算 widths/heights 的 child 元素的 widths/heights 元素在 parent 容器内设置透视的 translateZ 的公式是:
$scale = 1 + (translateZ * -1) / perspective
.
在 transform: scale( $scale )
的什么地方抛出这个公式。
perspective
是 parent 的透视值,translateZ
也是元素的 translateZ 值。请参阅底部的 片段 或 SASS mockup。
原来问题里已经给出答案了!
虽然这是所提问题的正确答案,但这根本没有解决我的具体问题,所以 here is a follow-up-question.
致谢:@Trolleymusic who at least opened my eyes somehow with
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 );
}