为CSS计算translateZ转换

Question

我在使用transform属性时遇到了问题。

我有1个简单的DIV填满屏幕，另一个DIV坐在它的上面。

我应用以下变换到DIV顶部：

'变换'： 'rotateX（Xdeg）旋转Y（Ydeg）'; 我也使用preserve-3d

这适用于除Safari以外的所有浏览器。从我读过的内容来看，Safari是唯一一个能够正确获得这个结果的剪辑，并且可以剪辑正在应用转换的顶级DIV。其他浏览器不剪裁DIV。基本上，当DIV旋转时，它会进入底层DIV的内部/后面。

所以，我假设我需要使用translateZ拉顶部的DIV？

我的问题是，我将如何去计算我需要沿着Z轴转换div的前进距离，还是让它在Safari中工作？旋转X和Y将是变量，因此用户可能能够沿着X，Y或两者旋转元素或根本不旋转元素。

对此的任何帮助将是惊人的。谢谢！

Answer 1

您的X和Y值总是正值吗？

在这种情况下，

transform-origin 0% 0% 

应该做的伎俩（使转动中心是将在结果下方的点）

如果没有，你只需要一点点的逻辑：

，如果你的X角为正，x原点为0％，否则x起源是100％

如果你Ÿ角为正，y原点为0％，否则y原点是100％

然后，应用

transform-origin x-origin y-origin 

Answer 2

我无法重现您的问题没有的jsfiddle。您可以使用像element.getBoundingClientRect()这样的功能。这会给你第二个转换的div的当前坐标。如果您将这些与第一个div的坐标进行比较，您应该找到所需的translateZ。您需要比较转换后的div的所有4个角点。负DELTA意味着该角落与第一个div相交。