用于平面到平面投影的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反复试验来实现此示例，以便在translateZ将其移出位置后将div移回。 但是，我想了解一种更好的方法来计算变换矩阵，因为我的div并不是固定大小，会改变所需的值。

Answer 1

我结束了在利用信息这个文章，以帮助找到我的解决方案，其中涉及三角数学，而不是使用完整的变换矩阵。

这是一个显示实际解决方案的工具：

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，这也必须使用Perspective： perspective: 100px在父元素的CSS中定义。