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 移回原位来实现此示例它不合适。但是我想了解计算转换矩阵的更好方法，因为我的 divs 不是固定大小，它会改变所需的值。

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

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

CSS transformation matrix for plane to plane projection

3d

transformation

transform

matrix

css-transforms