css - CSS3 变换矩阵到全变换转换

Question

我有一个100px 宽度和100px 高度的 div，具有以下矩阵：

transform: matrix(1, 0.5, 1, -0.45, 0, 0);

这给了我这个：

如何将变换矩阵 CSS 规则转换为完整的变换 CSS 规则？

例如：

transform: scale(0.1) rotate(0.5) skew(0.3);

Answer 1

您将需要根据矩阵中的值计算每个部分。我发现的关于仿射变换的最好介绍是这个（尽管它是针对 ActionScript，但数学是一样的）；

http://www.senocular.com/flash/tutorials/transformmatrix/

或者这个，专门针对 CSS：

http://dev.opera.com/articles/view/understanding-the-css-transforms-matrix/

Answer 2

我在 gists https://gist.github.com/mbostock/1340727上发现了一些称为分解矩阵的东西，符合 W3C 标准，希望这会有所帮助。