平面から平面への投影のためのCSS変換行列

Question

私は、視差スクロール効果のために3D変換を行ってきましたが、平面から平面への投影を行う方法を理解しようとしています。私は周りを探索しましたが、関係する行列の数学は、明確な例がなければ把握するのは少し難しいです。

複数のパネルを含むレイアウトが与えられた場合、元の変換されていないパースペクティブを維持しながら、各パネルを新しい任意のプレーンに移動するために変換マトリックスを取得したいと思います。

この問題を説明するために、3つの異なるdivにZ変換を実行し、スケーリングと平行移動を実行して平面投影を実現するプランカを示します。まるでスケール変換とX、Y変換を使用して変換がないかのように、特定のスクロール・ポイントで並んでいるように見えます。

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

https://plnkr.co/edit/UddWeLAWTQgkcpYMRP9q

私はtranslateZは場違いそれを引き出した後、バックのdivをシフトするために、手動scale、translateXとtranslateYをやって試行錯誤してこの例を達成しています。しかし、私はdivの値が必要な値を変更する固定サイズではないので、変換行列を計算するより良い方法を理解したいと思います。

Answer 1

ここで私は再び自分の質問に答えます。このサイトのように巨大なので、私の質問には何の助けも得ていません。これは評判のことですか？わかりません。

とにかく、完全変換行列を使用する代わりに三角演算を含む解決策を見つけるために、thisの情報を使用してしまいました。

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オブジェクトである：

は、ここでのアクションで解決策を示すplunkerです。

yは、選択した中心原点から左上隅までの垂直距離です。正の値は軸の上に移動し、負の値は下に移動します。ブラウザの座標系は左上の原点を使用するため、この値を取得するにはいくつかの計算が必要です。あなたの起源がどこになるかはあなた次第ですが、この解決法はそれが水平に配置されていることを前提としています。スクロールが選択した原点に達すると、レイヤーは元のレイアウト位置に同期します。以下の例では、3ブロックのレイアウトの中心に原点を選択しました。

newZは、オブジェクトに必要な新しい奥行値です。正の値を設定すると、視聴者の近くに移動し、負の値は離れます。この関数では、最大z値を100としてハードコーディングしています。これは、親要素のCSSで、パースペクティブを使用して定義する必要があります。perspective: 100px