计算过渡距离以证明投影大小合理
calculate transition distance to justify projection size
我有一张图像,通过在某些 透视 上应用 z 平移,视觉效果应该会变大。
我需要计算 z 方向上的平移距离 dist,这将导致初始图像投影的尺寸增加一些 factor。
透视属性设置观察者到场景的距离;这与说从观察者到初始(未转换)元素的距离相同。
当您应用变换时,会更改此位置,因此元素的最终距离将减少此数量。
元素的表观大小将与此更改成正比
初始距离=视角
最终距离 = 视角 - translate-z
比率 = 初始 / 最终
如果透视为1000px,translateZ为750px,则最终距离为250px,比例为4。图像将得到4x[=43=的缩放效果]
逆演算是:
translateZ = perspective * (1 - factor)
使用 1000 像素的透视和 750 像素的平移实现 4 倍的示例
.base {
width: 100px;
height: 100px;
perspective: 1000px;
perspective-origin: -3px -2px;
border: solid 1px red;
}
.transform {
width: 25px;
height: 25px;
border: solid 1px blue;
transform: translateZ(750px);
left: 34px;
top: 34px;
}
<div class="base">
<div class="transform"></div>
</div>
我有一张图像,通过在某些 透视 上应用 z 平移,视觉效果应该会变大。 我需要计算 z 方向上的平移距离 dist,这将导致初始图像投影的尺寸增加一些 factor。
透视属性设置观察者到场景的距离;这与说从观察者到初始(未转换)元素的距离相同。
当您应用变换时,会更改此位置,因此元素的最终距离将减少此数量。
元素的表观大小将与此更改成正比
初始距离=视角
最终距离 = 视角 - translate-z
比率 = 初始 / 最终
如果透视为1000px,translateZ为750px,则最终距离为250px,比例为4。图像将得到4x[=43=的缩放效果]
逆演算是:
translateZ = perspective * (1 - factor)
使用 1000 像素的透视和 750 像素的平移实现 4 倍的示例
.base {
width: 100px;
height: 100px;
perspective: 1000px;
perspective-origin: -3px -2px;
border: solid 1px red;
}
.transform {
width: 25px;
height: 25px;
border: solid 1px blue;
transform: translateZ(750px);
left: 34px;
top: 34px;
}
<div class="base">
<div class="transform"></div>
</div>