Question

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

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

根据chrome的开发人员工具，这个特定子元素的element.getBoundingClientRect().top是77.953109741210944，但是当我使用elements标签将`transform属性更改为：

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

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

如果是浏览器错误或其他什么，我正在使用chrome 32.0.1687.2 dev-m Aura

编辑：

这是一个jsfiddle链接：

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

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

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

Answer 1

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

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

enter image description here

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

所以getBoundingClientRect（）实际上是给你形状绑定的底部！现在形状被翻转，并且它不能理解3D。

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

所以，它是设计的。您可能希望将translateZ值限制为小于perspective。

编辑：

抱歉，我一直很忙。我打算给出更详细的回复。谢谢谁给了我赏金。

A updated demo

围绕这些数字，您将进行以下观察：

translateZ = perspective - 150px时，边界框异常小且位置错误
perspective - 150px < translateZ < perspective + 150px时，边界框位于应该位置的另一侧，且尺寸异常大
当tranlateZ = perspective + 150px时，边界框再次异常小，位置更高（1）
以上内容不受perspective-origin
150px是正方形的宽度/高度的一半
tranlateZ > perspective + 150px时，边界框再次正常！

为什么？

如果情况1）其中一条边与相机/透视图所在的平面相交。
在案例2中）正方形与相机平面相交
在案例3中）与案例1）中边缘相对的边缘现在与相机/透视平面相交。
在案例6中）所有广场都通过了相机平面

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

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

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

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

Answer 2

我不确定如何解释它，它可能会偏离基础，但是当您注释掉perspective css时，您会在整个表格中获得相同的值。我不确定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)';

当变换改变1px时，元素向上100％

2 个答案: