css - 计算过渡距离以证明投影大小合理

Question

我有一张图片，通过在某些透视 中应用 z 平移，视觉上应该会变大。我需要计算 z 方向 dist 的平移距离，这将导致初始图像投影的尺寸增加一些因子。

Answer 1

透视属性设置观察者到场景的距离；这与说出从查看者到初始(未转换)元素的距离相同。

当您应用变换时，会更改此位置，因此元素的最终距离将减少此数量。

元素的外观尺寸将与此变化成正比

初始距离 = 视角

最终距离 = 透视 - translate-z

比率 = 初始/最终

如果透视为1000px，translateZ为750px，最终距离为250px，比例为4。图像将得到4x的缩放效果

逆演算是:

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>