用于平面到平面投影的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