是否可以將不同來源的兩個轉換應用於一個div？

我有一個div，我想圍繞它的y軸旋轉（帶有透視圖），然後圍繞不同原點做另一個3d旋轉並顯示結果。這可能嗎？我只能在轉換語句之外獲得轉換原點，因此定義一個新轉換隻會覆蓋第一個轉換。是否可以將不同來源的兩個轉換應用於一個div？

我也試過嵌套divs和做一個內部div轉換和另一個外部div，但結果只是第一次轉換的投影到第二個平面，它不存在在自己的飛機上，所以在屏幕上看起來完全錯誤。

據我所知，我不能使用JavaScript的畫布，因爲這些轉換沒有視角。

這有點什麼，我試圖做的：

-webkit-transform-origin: 0px 0px; 
-webkit-transform: perspective(1000px) rotateY(-90deg); 
-webkit-transform-origin: 200px 200px; 
-webkit-transform: perspective(1000px) rotateX(x deg) rotateZ(z deg);

我如何能看到這兩個轉變的結果任何想法？

來源

2011-10-02 Curyous

我想我已經找到了答案，在包裝的div使用

-webkit-transform-style: preserve-3d;

。

感謝this的問題，並如here和解釋here（從該問題的答案）。

來源

2011-10-02 07:45:38 Curyous

尼斯簡單的答案是沒有的事實，IE11不支持它。安娜的答案應該是公認的答案，因爲它提供了使用翻譯的一般方法。她還提供了一個解決方案，用於維護3d不能用於另一個問題。 –

以下是該解決方法：http://stackoverflow.com/questions/20725192/css3-3d-cube-ie-transform-style-preserve-3d-workaround –

不涉及具有包裝的解決方案是鏈接兩個變換之間的translate3d。任何平移變換移動transform-origin爲所有後續的變換 - 沿x軸translateX(tx)移動時，它通過tx，translateY(ty)移動時，它通過ty沿y軸，translateZ(tz)沿着z軸移動時，它通過tz和translate3d(tx, ty, tz)移動時，它通過沿x軸tx ，沿y軸的ty和沿z軸的tz。

所以你transform會變成：如果

transform: perspective(1000px) rotateY(-90deg) 
      translate3d(200px, 200px, 0) 
      perspective(1000px) rotateX(x deg) rotateZ(z deg);

來源

2013-01-19 14:26:52 Ana

是否可以將不同來源的兩個轉換應用於一個div？

回答

相關問題