CSS3转换矩阵到完整转换的转换方法

Question

5

我有一个宽度为100px、高度为100px的

元素，其矩阵如下：

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

这给了我这个结果：

应用矩阵变换的div示意图

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

例如：

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

- onlineracoon

我编辑了我的问题，现在问题很清楚了。 - onlineracoon

“全转换CSS规则”是什么意思？ - Jude Fisher

transform: scale(0.1) rotate(0.5) skew(0.3);变换：缩放（0.1）旋转（0.5）倾斜（0.3）; - onlineracoon

2个回答

2

有一种叫做分解矩阵的东西，符合W3C标准，在gists上找到了https://gist.github.com/mbostock/1340727。希望这能帮到你。

- thednp

有没有更纯函数式的版本，不依赖于页面上的元素？也不依赖于外部库？ - Ky -

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jude Fisher · Accepted Answer

你需要根据矩阵中的值计算每个部分。我发现最好的仿射变换介绍是这个（即使它是针对ActionScript的，但数学是相同的）。

或者这个，特别是为CSS而设计的：