CSS3转换矩阵到完整转换 [英] CSS3 Transform Matrix To Full Transform Conversion

问题描述

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

I have a div of 100px width and 100px height with the following matrix:

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

哪一个给我呢？

< img src = https://i.stack.imgur.com/V77sM.png alt =使用matrxi转换后的div>

如何转换将矩阵CSS规则转换为完全转换CSS规则？

How can I convert the transform matrix CSS rule into a full transform CSS rule?

例如：

For example:

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

推荐答案

您将需要根据以下值计算每个部分矩阵。我发现的关于仿射变换的最好的介绍就是这篇文章（即使它是用于ActionScript的，数学也一样）；

You will need to calculate each portion from the values in the matrix. The best introduction to affine transformations that I've found is this one (even though it's for ActionScript, the math is the same);

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

或者这是专门针对CSS的：

Or this one, specifically for CSS:

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

这篇关于CSS3转换矩阵到完整转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！