9

我在我的项目中使用 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 时，元素似乎会跳到顶部 -80000 左右。然而，从视觉上看，该元素看起来应该并且不会在 1027 像素处随机“跳跃”。有人可以说可能导致这种情况的情况吗？

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

编辑：

这是一个jsfiddle链接：

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

它将生成一个包含所有translateZ值和结果elt.getBoundingClientRect().top值的表。代码很乱，但是在输出的表格中，如果你仔细看，你会发现，在某些时候，顶部的值会随机跳得很远，很远。然后它会很快恢复到以前的值。诡异的。

小提琴可能需要很长时间才能加载。

4

2 回答 2

8

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

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

在此处输入图像描述

相机后面的矩形，随着它的旋转，它的一部分被旋转回到视野中。

所以 getBoundingClientRect() 实际上是给你形状边界的底部！现在形状被翻转了，它不理解 3D。

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

所以，这是设计使然。您可能希望将该translateZ值限制为小于perspective.

编辑：

对不起，我一直很忙。我的意思是给出更详细的答复。感谢给我赏金的人。

更新的演示

玩弄这些数字，您将做出以下观察：

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

  2. 时perspective - 150px < translateZ < perspective + 150px，边界框在应有位置的对面，尺寸异常大

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

  4. 以上不受透视原点的影响

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

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

这是为什么？

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

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

这就是我所说的“它不理解 3D”的意思。这是模糊的，因为它可以是我意识到，对不起。当所有形状都通过相机平面时，它会再次工作。

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

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

于 2014-02-04T20:24:52.113 回答
0

我不知道如何解释它，它可能会偏离基础，但是当你注释掉perspectivecss 时，你会在整个表格中得到相同的值。我不确定perspective对数学有什么影响...

#main3DWrapper{
  /*
  -webkit-perspective: 1500px;
  -moz-perspective: 1500px;
  perspective:1500px;
  -webkit-perspective-origin: 50% 1%;
  perspective-origin:50% 1%;
  */
  -webkit-transform: translate3d(0,0,0,0);
  transform:translate3d(0,0,0,0);
  display: block;
  height: 100%;
  left: -121.96603393554688px;
  position: absolute;
  top: 409.5150146484375px;
  width: 100%;
}

另外，为什么要在 中设置translateZ()两次值js？

container.style.webkitTransform='translateZ('+dist+'px) rotateX(-90deg) rotateY(180deg) translateZ(429.001px)';
container.style.transform='translateZ('+dist+'px) rotateX(-90deg) rotateY(180deg) translateZ(429.001px)';

不应该只是？：

container.style.webkitTransform='translateZ('+dist+'px) rotateX(-90deg) rotateY(180deg)';
container.style.transform='translateZ('+dist+'px) rotateX(-90deg) rotateY(180deg)';
于 2014-02-03T15:51:59.863 回答