Css 使用透视图和translateZ的元素比例公式是什么？_Css_Perspective_Translate3d

Css 使用透视图和translateZ的元素比例公式是什么？

css

Css 使用透视图和translateZ的元素比例公式是什么？,css,perspective,translate3d,Css,Perspective,Translate3d,我想做以下工作：给定一个带有透视图的容器和一个带有translateZ值的内部元素，我想用translateY“向上拉”，以便在视觉上触摸周围容器的顶部：有没有某种公式，给定容器的透视值，元素的宽度和高度，以及它的Z平移，我可以得到那种“顶部”计算？我一直在玩弄它，但我似乎找不到一些规则，因为这些似乎都是变量感谢您的帮助。可能有（不知道是否立即），但您是否尝试过更改-webkit transform-origin:首先查看是否可以简单地沿顶部应用转换，使元素显示在您想要的位置，而无需进行转换

我想做以下工作：给定一个带有透视图的容器和一个带有translateZ值的内部元素，我想用translateY“向上拉”，以便在视觉上触摸周围容器的顶部：

有没有某种公式，给定容器的透视值，元素的宽度和高度，以及它的Z平移，我可以得到那种“顶部”计算？我一直在玩弄它，但我似乎找不到一些规则，因为这些似乎都是变量

感谢您的帮助。

可能有（不知道是否立即），但您是否尝试过更改

-webkit transform-origin:

首先查看是否可以简单地沿顶部应用转换，使元素显示在您想要的位置，而无需进行转换？

是

实际上有一个非常简单的公式来计算偏移量——维基百科上的有一个图表和公式

公式为

bx=ax*bz/az

，其中：

```
ax
```
是距离变换原点的原始距离
```
az
```
是透视+否定的
```
translateZ
```
```
bz
```
是透视图

这将给你：

```
bx
```
-距离变换原点的新距离

因此，您需要知道：

```
bz
```
：透视图（例如：
```
1000px
```
）
```
ax
```
：与变换原点的偏移量，例如：如果原点为50%，则这需要是元素相对于父元素中心的
```
top
```
（
```
parent.height/2+element.top
```
）--比方说
```
-500px
```
```
z
```
：元素的
```
translateZ
```
（例如：
```
-600px
```
）
```
az
```
然后是
```
bz+z*-1
```
，在这种情况下：
```
1000+（-600*-1）=1600
```

所以公式是：

-500*1000/1600=-312.5

元素从原点垂直偏移

-312.5px

，而最初它是偏移

-500px

，这两个数字之间的差异是需要添加到旧的

顶部

值以获得等效的新值

此公式也适用于Y轴

我在这里举了一个简单的例子：

我试过了，但我想它不会影响任何东西，因为它正在转换为z轴…哦，这个例子是-webkit前缀-抱歉。谢谢，这正是我想要的！我自己也在做这件事，如果有人感兴趣，我就创作了一支钢笔：@Trolleymusic也许你知道。我真的希望如此（+100悬赏可用）！