Question

通过将z translate应用于某些透视，我有一个视觉上应该变得更大的图像。我需要计算z方向上的平移距离 dist ，这将导致初始图像投影的大小增加一些因子。

Answer 1

perspective属性设置从观看者到场景的距离;这与说出从观察者到初始（未转化）元素的距离是一样的。

当你应用变换时，会改变这个位置，这样元素的最终距离就会减少。

元素的明显大小将与此变化成比例

初始距离= 观点

最终距离= 观点 - translate-z

比率= 初始 / 最终

如果透视为1000px，而translateZ为750px，则最终距离为250px，比率为4.图像的缩放效果为 4x

逆微积分是：

translateZ = perspective *（1 - factor）

示例使用透视1000px实现因子4并翻译750px

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

计算过渡距离以证明投影尺寸

1 个答案: