用于平面到平面投影的CSS变换矩阵

Question

我一直在玩视觉滚动效果的3D变换，我试图了解如何进行平面投影。我已经四处寻找，但如果没有明确的例子，所涉及的矩阵数学有点难以掌握。

给定具有多个面板的布局，我想获得变换矩阵以将每个面板移动到新的任意平面上，同时保持原始的未变换透视图。

为了说明这个问题，这里有一个plunker，它在3个不同的div上执行Z变换，同时进行缩放和平移以实现平面投影。我让它们看起来在特定的滚动点对齐，好像没有使用缩放和X，Y平移的转换。

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

https://plnkr.co/edit/UddWeLAWTQgkcpYMRP9q

在scale把它拉出来之后，我已经通过试验和错误做手动translateX，translateY和translateZ来实现这个例子，以便将div移回。但是我想了解计算变换矩阵的更好方法，因为我的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对象。

y是从您选择的中心原点到左上角的垂直距离，正值向上移动轴，负值向下移动。由于浏览器坐标系使用左上角的原点，因此需要进行一些计算才能获得此值。您可以选择原点的位置，但此解决方案假定它是水平居中的。当滚动到达您选择的原点时，图层将同步到原始布局位置。在下面的示例中，我在3块布局的正中心选择了原点。

newZ是对象所需的新深度值。正值使其更接近观察者，消极值。在这个函数中，我将最大z值硬编码为100，这也必须使用透视在父元素的css中定义：perspective: 100px