javascript - 当变换改变 1px 时元素向上 100%

Question

我在我的元素中使用 css 3d 转换。我正在尝试对其他几个元素的包含元素应用新的转换。我还尝试在其子元素之一上使用 getBoundingClientRect。该容器中还有其他元素。当容器的 transform css 属性具有此值时:

translateZ(1026px) rotateX(-90deg) rotateY(180deg) translateZ(439.001px)

这是 element.getBoundingClientRect().top 对于那个特定的子元素是: 77.953109741210944 根据 chrome 的开发者工具但是当我使用 elements 选项卡将 `transform 属性更改为此:

translateZ(1027px) rotateX(-90deg) rotateY(180deg) translateZ(439.001px)

element.getBoundingClientRect().top 是这样的:-75048.6484375 这可能是什么原因造成的？我没有发布任何代码，因为即使我通过控制台修改值也会发生这种情况。当我将第一个 translateZ 设置为 1000px 时，它仍然约为 77。即使它为 0，边界矩形的顶部也约为 50-100。但是当它超过 1026px 时，元素似乎跳到 top -80000 左右。然而，在视觉上，该元素看起来应该并且不会在 1027 像素处随机“跳跃”。有人可以说出可能导致这种情况的情况吗？

如果是浏览器错误或其他问题，我使用的是 chrome 32.0.1687.2 dev-m Aura

编辑:

这是一个 jsfiddle 链接:

http://jsfiddle.net/a6KxQ/2/

它将生成一个包含所有 translateZ 值和生成的 elt.getBoundingClientRect().top 值的表格。代码比较乱，但是在输出的表格中，仔细看会发现，在某些时候，top的值会随机的往下跳很远很远。然后它会迅速恢复到以前的值。很奇怪。

fiddle 可能需要很长时间才能加载。

Answer 1

如您所料，它与 perspective 有关的观点。通过增加第一个值 translateZ ，您正在使矩形更靠近您。最终它是如此接近，它已经通过了相机的点。从那时起，未旋转的形状就站在你的眼睛后面。

然后你做了一个rotateX(-90deg) .发生的事情是矩形向前倒下(朝向正 Z 方向，但在相机后面。)。现在，由于 View 的隧道是梯形的，因此您可以得到我们在这张截图中看到的内容:

在相机后面的矩形中，当它旋转时，它的一部分会旋转回到视野中。

所以 getBoundingClientRect() 实际上为您提供了形状边界的底部!现在形状被翻转了，它不理解 3D。

我希望这对你有意义。我想先联系你 :) 在投反对票之前问我，我可以详细解释。

所以，这是设计使然。您可能想限制 translateZ值小于 perspective .

编辑:

对不起，最近比较忙。我的意思是给出更详细的答复。感谢给我赏金的人。

A updated demo

围绕数字，您将做出以下观察:

1. 当 translateZ = perspective - 150px ，边界框异常小且位置错误

2. 当 perspective - 150px < translateZ < perspective + 150px , bounding box在应该在的对面，尺寸异常大

3. 当 tranlateZ = perspective + 150px , 在情况 1) 中边界框再次异常小并且位置更高

4. 以上不受perspective-origin的影响

5. 150px 是正方形宽度/高度的一半

6. 当 tranlateZ > perspective + 150px ，边界框又正常了!

这是为什么？

• 在情况 1) 中，其中一条边刚好与相机/视角所在的平面相交。
• 情况 2) 正方形与相机平面相交
• 在案例 3) 中与案例 1) 中的边缘相对的边缘现在与相机/透视平面相交。
• 在情况 6) 中所有的正方形都通过了相机平面

用于将 3D 坐标转换为屏幕上的 2D 坐标的投影算法没有考虑到两个 Angular 在相机前面，另外两个 Angular 在后面的事实，因此产生了错误的投影，因此尺寸错误.

这就是我所说的“它不理解 3D”的意思。我意识到这很含糊，抱歉。当所有形状都通过相机平面时，它再次起作用。

Firefox 和 Chrome 都有这个问题，但在数字上有不同的表示。可能是因为使用了不同的投影矩阵。所以我不想弄清楚究竟出了什么问题。向他们发送错误报告 :)

但实际上，您可能需要解决它。