用於平面到平面投影的CSS變換矩陣

Question

我一直在玩視差滾動效果的3D變換，我試圖瞭解如何進行平面到平面投影。我已經四處搜尋，但涉及的矩陣數學有點難以理解，沒有明確的例子。

給定一個具有多個面板的佈局，我希望獲得轉換矩陣以將每個面板移動到一個新的任意平面上，同時保持原始的未轉換透視圖。

爲了說明這個問題，這裏是一個在3個不同的div上執行Z變換以及縮放和平移以實現平面投影的移動器。我讓他們看起來像一個特定的滾動點對齊，就好像沒有使用縮放和X，Y轉換的轉換。

transform: translateZ(60px) scale(0.4) translateX(-270px) translateY(258px); 

https://plnkr.co/edit/UddWeLAWTQgkcpYMRP9q

我已經實現了與試錯上工scale，translateX和translateY到div移回了translateZ拉它出來的地方後，這個例子。不過，我想了解更好的方法來計算轉換矩陣，因爲我的div不是一個固定的大小，它會改變所需的值。

Answer 1

在這裏，我再次回答我自己的問題。儘管這個網站一直在尋找有用的解決方案，但我根本沒有得到任何幫助。這是一個聲譽的事情？我不明白。

無論如何，我結束了使用this文章中的信息來幫助找到我的解決方案，其中涉及三角數學而不是使用完整的變換矩陣。

這裏的表示動作的溶液中的plunker：

https://plnkr.co/edit/W5GTbViN0O8gnkCmxV5W?p=preview

function translateLayer(obj, y, newZ) 
{ 
    var containerWidth = jQuery('.parallax').width(); 
    var x = (obj.position().left + parseInt(obj.css('marginLeft'), 10)) - (containerWidth/2); 
    var z = 100; 

    var n = z - newZ; 
    var scale = 1 - (newZ/z); 
    var newX = (n/z) * x; 
    var newY = (n/z) * y; 
    var transX = 0 - (x - newX); 
    var transY = (y - newY); 

    obj.css({'transform-origin':'0% 0%', 'transform':'translate3d('+transX+'px, '+transY+'px, '+newZ+'px) scale('+scale+')'}); 
} 

obj是要翻譯的jQuery對象。

y是從您選擇的中心原點到左上角的垂直距離，正值向上移動，負值向下移動。由於瀏覽器座標系統使用左上角的原點，因此需要進行一些計算以獲取此值。這取決於您選擇原點的位置，但此解決方案假定它是水平居中的。當滾動到達您選擇的原點時，圖層將同步到原始佈局位置。在下面的例子中，我選擇了3塊佈局中心的原點。

newZ是對象所需的新深度值。正值將其移近觀察者，負值遠離。在這個函數中，我將最大z值硬編碼爲100，這也必須使用透視圖在父元素的css中定義：perspective: 100px