我正在尝试为我的元素创建响应式布局，其中我将 png 图像作为背景，将 jpg 屏幕截图作为屏幕区域。 JSFiddle 上的 Example。我创建了 matrix3D 转换 here，使用固定图像大小作为背景和屏幕截图图像。如您所见 — 图像完美对齐并将 transform-origin 设置为 0 并应用此转换:
转换: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:
通过尝试从 matrix3d 中删除 translate 部分，我在这里取得了一些进展。我也将 transform-origin 移动到 50% 50% 以确保从图像中心以相同方式应用所有转换。 Here is 更新的工具包状态和 new JSFiddle example 。仍然不完美。
更新#2:
我创建了简单的 UI 来控制所有旋转/缩放变换 here on JSFiddle 并重新裁剪 iPhone 图像以确保绿屏的中心(您可以在中间看到交叉线)与屏幕截图中心位于同一位置；现在我有了更多的控件和更可预测的结果，但在调整大小方面仍然存在问题。
最佳答案
好的，我已经在 window.resize 上实现了透视校正，这是我的解决方案。 Here is a final JSfiddle example .仍然不明白它有什么帮助，但它工作正常。
关于css - 响应矩阵三维变换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37715162/