如何从CSS transform rotate(deg)规则中找到转换矩阵？

Question

假设我有一个CSS规则为transform: rotate(15deg)的

元素。如果我使用JQuery读取该元素的计算CSS变换，我会看到浏览器已将rotate(15deg)转换为值matrix(0.965926, 0.258819, -0.258819, 0.965926, 0, 0)。

我知道旋转角度的值，并且希望在不查询DOM的情况下计算出这个旋转矩阵。如何从旋转角度编程计算元素的旋转矩阵呢？

- jbkly

---

这更多是关于数学的：https://en.wikipedia.org/wiki/Transformation_matrix#Affine_transformations，其中6个参数表示来自3x3矩阵的上部2x3。 - fuyushimoya

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))

- jbkly