计算 CSS 变换的 translateZ答案

【问题标题】：Calculate translateZ for CSS Transform计算 CSS 变换的 translateZ
【发布时间】：2013-04-21 22:14:22
【问题描述】：

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

我有 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 旋转元素，或者根本不旋转。

对此的任何帮助都会令人惊叹。谢谢！

【问题讨论】：

标签： css safari transform clipping

【解决方案1】：

你的 X 和 Y 值总是正数吗？

在这种情况下，

transform-origin 0% 0%

应该做到这一点（使旋转中心成为结果中较低的点）

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

如果您的 X 角为正，则 x 原点为 0%，否则 x 原点为 100%

如果您的 Y 角为正，则 y 原点为 0%，否则 y 原点为 100%

然后，应用

transform-origin x-origin y-origin

【讨论】：

【解决方案2】：

如果没有 jsFiddle，我将无法重现您的问题。你可以使用像element.getBoundingClientRect() 这样的函数。这将为您提供第二个转换后的 div 的当前坐标。如果您将这些与第一个 div 的坐标进行比较，您应该会找到所需的 translateZ。您需要比较转换后的 div 的所有 4 个角。负 DELTA 表示该角与第一个 div 相交。

【讨论】：