javascript - 你如何从 CSS transform rotate(deg) 规则中找到变换矩阵？

Question

假设我有一个 div，它应用了 transform: rotate(15deg) 的 CSS 规则。如果我使用 JQuery 读取元素的计算 CSS 变换，我会看到浏览器已将 rotate(15deg) 变换转换为 matrix(0.965926, 0.258819, -0.258819, 0.965926, 0, 0)。

我知道以度为单位的旋转值，我想在不查询 DOM 的情况下计算这个旋转矩阵。如何通过以度为单位的旋转以编程方式计算元素的旋转矩阵？

Answer 1

好的，我已经找到使用 this answer 的解决方案了.

1. 将度值转换为弧度:var radians = degrees * Math.PI/180。
2. 使用此模式构建旋转矩阵:matrix(a,b,c,d,e,f)
   • a = Math.cos(弧度)
   • b = Math.sin(弧度)
   • c = -b
   • d = a
   • e = 0
   • f = 0

浏览器中计算的 CSS 值四舍五入到小数点后 6 位，因此为了精确匹配，您可以添加额外的步骤:

a = parseFloat(a.toFixed(6))