响应矩阵3D变换

Question

我正在尝试为我的项目创建自适应布局，其中我将png图片作为背景，并为屏幕区域设置jpg屏幕截图。 JSFiddle上的Example。我使用固定图片大小为背景和截图图片创建了matrix3D转换here。如您所见 - 图像完全对齐且transform-origin设置为0并应用此转换：

transform: matrix3d( 0.642387, -0.289132, 0, 0.000087, 0.456665, 0.32747, 0, -0.000096, 0, 0, 1, 0, 88, 256, 0, 1);

现在我试图让它对屏幕宽度做出响应但是我无法弄清楚如何在较小的屏幕尺寸上修复不正确的比例或者除了接近原始尺寸之外的其他任何比例（尝试调整JSFiddle的大小）窗口）用于创建matrix3d转换。

看起来matrix3d链接到元素尺寸（以像素为单位）或者我错了。

更新＃1：

我在尝试从translate中删除matrix3d部分方面取得了一些进展。我已将transform-origin移动到50％50％，以确保所有转换以相同的方式从图像中心应用。 Here is更新的工具包状态和new JSFiddle example。仍然不完美。

更新＃2：

我已创建简单的用户界面来控制所有旋转/缩放转换here on JSFiddle并重新拍摄iPhone图像，以确保绿色屏幕的中心（您可以看到中间的交叉线）是相同的位置作为截图中心;现在我有更多的控件和更可预测的结果，但仍然有调整大小的问题。

Answer 1

好的，我已经在window.resize上实施了一个透视校正，这是我的解决方案。 Here is a final JSfiddle example。仍然没有明白它是如何帮助的，但它运作正常。