Css 计算过渡距离以调整投影大小

Css 计算过渡距离以调整投影大小,css,matrix,css-transforms,webkit-perspective,Css,Matrix,Css Transforms,Webkit Perspective,我有一个图像,通过应用z平移和一些透视图,视觉上应该会变得更大。 我需要计算z方向上的平移距离dist,这将导致初始图像投影的大小增加一些因子透视属性设置从观察者到场景的距离;这与表示从查看器到初始(未转换)元素的距离相同 应用变换时,将更改此位置,以便元素的最终距离将按此量减小 元素的空间大小将与此变化成比例 初始距离=透视图 最终距离=透视图-平移-z 比率=初始/最终 如果透视为1000px,translateZ为750px,则最终距离为250px,比率为4。图像的缩放效果为4x 逆演算是

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

透视属性设置从观察者到场景的距离;这与表示从查看器到初始(未转换)元素的距离相同

应用变换时,将更改此位置,以便元素的最终距离将按此量减小

元素的空间大小将与此变化成比例

初始距离=透视图

最终距离=透视图-平移-z

比率=初始/最终

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

逆演算是:

translateZ=perspective*(1-因子)

示例实现了透视1000px和平移750px的因子4
.base{
宽度:100px;
高度:100px;
透视图:1000px;
透视原点:-3px-2px;
边框:实心1px红色;
}
.变换{
宽度:25px;
高度:25px;
边框:纯色1px蓝色;
变换:translateZ(750px);
左:34px;
顶部:34px;
}


你能举个例子吗?@Danield done。请注意,边框变大了,但尺寸没有问题