將3X3變換矩陣變換為4X4矩陣，用於css變換matrix3d

Question

我有一個3X3變換矩陣，它是單應變換的輸出。

我想根據這個矩陣旋轉和拉伸div，但看起來css變換要么接收4X4矩陣，要么接收2X3矩陣 。

我嘗試通過添加零和一個像這里的一個轉換3X3矩陣，但它看起來完全錯誤（它要么將div旋轉90度，要么我做轉置，太小）。

如何轉換3X3矩陣，使css'變換能正常工作？

Answer 1

這里有一些可以幫助你的東西：

關於您所回憶的矩陣有幾種可能性：

---

矩陣是一個2D變換矩陣：在這種情況下，你做的矩陣擴展會失敗，因為矩陣布局將如下所示：

[x1, x2, tx]
[y1, y2, ty]
[0 , 0 , 1 ]

假設X和Y軸不改變，那么對於4x4矩陣，擴展將看起來像這樣：

[x1, x2, 0, tx]
[y1, y2, 0, ty]
[0 , 0 , 1, 0 ]
[0 , 0 , 0, 1 ]

但由於css使用的是2x3矩陣，因此隱含了最后一行。 所以你可以像這樣添加它們： transform: matrix(x1,y1,x2,y2,tx,ty); （參見https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix ）

---

矩陣是一個3D旋轉矩陣：在這種情況下，你做的矩陣擴展會失敗，因為矩陣布局將如下所示：

[x1, x2, x3]
[y1, y2, y3]
[z1, z2, z3]

對於4x4矩陣，擴展名看起來像這樣:(請參閱問題中的鏈接）

[x1, x2, x3, 0]
[y1, y2, y3, 0]
[z3, z3, z3, 0]
[0 , 0 , 0 , 1]

您可以像這樣添加它們： transform: matrix(x1,y1,z1,0, x2,y2,z2,0, x3,y3,z3,0, 0,0,0,1); （參見https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix ）

---

最后的可能性：矩陣是一個投射的。 沒有線索來處理這個..

---

如果我不得不猜測：通過查看這個例子（來自你提供的鏈接）我會說這是一個2D變換矩陣

請注意：jsfeat lib有一個行主要訂單，但css需要一個列主要訂單！

 var affine_kernel = new jsfeat.motion_model.affine2d(); var affine_transform = new jsfeat.matrix_t(3, 3, jsfeat.F32_t | jsfeat.C1_t); var count = 33; var from = []; var to = []; for(var i = 0; i < count; ++i) { from[i] = { "x":Math.random()*320, "y":Math.random()*240 }; to[i] = { "x":from[i].x + 5, "y":from[i].y+5 }; } affine_kernel.run(from, to, affine_transform, count); var a = [...affine_transform.data.subarray(0 , 6)]; b = [ 0.08420821279287338, -0.03247755020856857, 14.28314018249511, -0.009080140851438, 0.11894367635250, 7.15110540390014, -0.00034110905835, -0.01147077046, 1 ]; window.addEventListener('load', function(){ var elem = document.getElementById('to-transform'); elem.style.transform = 'matrix('+a[0]+','+a[3]+','+a[1]+','+a[4]+','+a[2]+','+a[5]+')'; var mat = [b[0],b[3],0,b[6], b[1],b[4],0,b[7], 0,0,1,0, b[2],b[5],0,b[8] ] var elem1 = document.getElementById('to-transform2'); elem1.style.transform = 'matrix3d('+mat.join(',')+')'; }) 

 .container { width:200px; height:200px; background: #aaa; position:relative; float:left; margin-right:10px; } .to-transform { width:100px; height:100px; position:absolute; background: #a00; text-align: center; line-height: 92px; } 

 <script type="text/javascript" src="https://inspirit.github.io/jsfeat/js/jsfeat-min.js"></script> <div class="container"> <div id="to-transform" class="to-transform">to-transform</div> </div> <div class="container"> <div id="to-transform2" class="to-transform">to-transform2</div> </div>