如何根据 CSS 变换旋转（deg）规则找到变换矩阵？

Question

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

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

Answer 1

好的，我已经使用这个答案找到了解决方案。

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

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

a = parseFloat(a.toFixed(6))