我正在尝试为我的元素创建响应式布局，其中我有 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:
我创建了简单的 UI 来控制所有旋转/缩放变换 here on JSFiddle 和重新裁剪的 iPhone 图像，以确保绿屏的中心(您可以在中间看到十字线)与屏幕截图中心位于同一位置；现在我有更多的控制和更可预测的结果，但仍然有调整大小的问题。
最佳答案
好的，我已经对 window.resize 实现了透视校正，这是我的解决方案。 Here is a final JSfiddle example 。仍然不明白它有什么帮助，但它工作正常。
关于css - 响应式矩阵3D变换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37715162/