我在使用 transform 属性时遇到了问题。
我有 1 个简单的 DIV 填充屏幕，另一个 DIV 位于其顶部。
我将以下转换应用于顶部的 DIV：
'变换':'rotateX(Xdeg) rotateY(Ydeg)'; 我也在使用preserve-3d
这适用于除 Safari 之外的所有浏览器。从我读到的内容来看，Safari 是唯一一个真正做到这一点的人，它会剪辑应用转换的顶部 DIV。其他浏览器不会剪辑 DIV。基本上，当 DIV 旋转时，它会进入底层 DIV 的内部/后面。
那么，我假设我需要使用 translateZ 将顶部 DIV 向前拉？
我的问题是，我将如何计算我需要将 div 沿 Z 轴向前平移多少，或者让它在 Safari 中工作？旋转 X 和 Y 将是变量，因此用户可能能够沿 X、Y 旋转元素，或者根本不旋转。
对此的任何帮助都将是惊人的。谢谢！
您的 X 和 Y 值是否始终为正？
在这种情况下，
transform-origin 0% 0%
应该做的伎俩（使旋转中心成为结果中较低的点）
如果没有，你只需要一点逻辑：
如果您的 X 角为正，则 x 原点为 0%，否则 x 原点为 100%
如果您的 Y 角为正，则 y 原点为 0%，否则 y 原点为 100%
然后，申请
transform-origin x-origin y-origin
如果没有 jsFiddle，我将无法重现您的问题。您可以使用类似element.getBoundingClientRect(). 这将为您提供第二个转换后的 div 的当前坐标。如果您将这些与第一个 div 的坐标进行比较，您应该会找到所需的 translateZ。您需要比较转换后的 div 的所有 4 个角。负 DELTA 表示该角与第一个 div 相交。