響應矩陣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);

現在我要把它響應屏幕的寬度，但我不能想通它可以解決如何在小屏幕尺寸上修正不正確的比例，或者修改用於創建matrix3d轉換的原始尺寸（嘗試調整JSFiddle窗口的大小）。

貌似matrix3d連接元件尺寸像素或也許我錯了。

更新＃1：

我在這裏有一些進展，試圖消除translate部分來自matrix3d。我已將transform-origin移至50％50％，以確保所有轉換以相同方式從圖像中心應用。 Here is更新的工具包狀態和new JSFiddle example。仍然不完美。

更新＃2：

我創建了簡單的用戶界面來控制所有旋轉/縮放轉換here on JSFiddle和recropped iPhone圖像，以確保綠色屏幕中心（你可以看到在中間十字線）被在屏幕截圖中心的相同位置;現在我有更多的控制和更可預測的結果，但仍然有調整大小的問題。

Answer 1

好吧，我已經實現了對window.resize透視校正，這是在我的情況的解決方案。 Here is a final JSfiddle example。仍然不明白它如何幫助，但它工作正常。