爲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相交。