如何从CSS变换旋转（度）规则中找到变换矩阵？

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(radians)
   • b = Math.sin(radians)
   • c = -b
   • d = a
   • e = 0
   • f = 0

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

a = parseFloat(a.toFixed(6))