响应矩阵三维变换
Responsive matrix3D transformation
我正在尝试为我的项目创建响应式布局，其中我有 png 图像作为背景，jpg 屏幕截图作为屏幕区域。 Example on JSFiddle. I've created matrix3D transformation 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 window) 用于创建 matrix3d 转换。
看起来 matrix3d 链接到以像素为单位的元素尺寸，或者我错了。
更新#1：
通过尝试从 matrix3d 中删除 translate 部分，我在这里取得了一些进展。我也将 transform-origin 移动到 50% 50% 以确保从图像中心以相同方式应用所有变换。 Here is the updated toolkit state and new JSFiddle example。仍然不完美。
更新#2：
我创建了简单的 UI 来控制所有 rotate/scale 转换 here on JSFiddle 并重新裁剪 iPhone 图像以确保绿屏的中心（您可以看到中间的交叉线）与屏幕截图中心位于同一位置；现在我有了更多的控件和更可预测的结果，但在调整大小方面仍然存在问题。
好的，我已经对 window.resize 进行了透视校正，这是我的解决方案。 Here is a final JSfiddle example。仍然不明白它有什么帮助，但它工作正常。
我正在尝试为我的项目创建响应式布局，其中我有 png 图像作为背景，jpg 屏幕截图作为屏幕区域。 Example on JSFiddle. I've created matrix3D transformation 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 window) 用于创建 matrix3d 转换。
看起来 matrix3d 链接到以像素为单位的元素尺寸，或者我错了。
更新#1：
通过尝试从 matrix3d 中删除 translate 部分，我在这里取得了一些进展。我也将 transform-origin 移动到 50% 50% 以确保从图像中心以相同方式应用所有变换。 Here is the updated toolkit state and new JSFiddle example。仍然不完美。
更新#2：
我创建了简单的 UI 来控制所有 rotate/scale 转换 here on JSFiddle 并重新裁剪 iPhone 图像以确保绿屏的中心（您可以看到中间的交叉线）与屏幕截图中心位于同一位置；现在我有了更多的控件和更可预测的结果，但在调整大小方面仍然存在问题。
好的，我已经对 window.resize 进行了透视校正，这是我的解决方案。 Here is a final JSfiddle example。仍然不明白它有什么帮助，但它工作正常。