CSS3之Matrix属性总结

背景

在web端刷微博点开图片时，发现有图片向左旋转和向右旋转等功能，出于职业本能，我自然的猜测：当然是用transfrom: rotate(ndeg)做的啦！

但是打开console却发现跟我想的有点不太一样：

渣浪用的居然是matrix属性（其实这里用matrix有种炫技的赶脚，后文会提）！

说起matrix，FEer可能既熟悉又陌生，毕竟我们平时使用transform时，其实更多的是使用rotate, translate, scale等属性，这些是基于matrix的魔改，属于造福人类的属性，但是matrix我们却用(gen)的(ben)并(mei)不(yong)多(guo)。此时我也认识到了自己知识的短浅，赶紧查漏补缺，写下此文加深对matrix大佬的印象。

属性总结

基本用法

transform: matrix(a, b ,c ,d ,e ,f);

转换公式

translate

transform: matrix(0, 0, 0, 0, tx, ty);

等于：

transform: translate(tx, ty);

scale

transform: matrix(sx, 0, 0, sy, 0, 0);

等于：

transform: scale(sx, sy);

rotate

这个稍微复杂一点，需要用到三角函数，这边总结几个常用角度，建议使用直接使用rotate：

rotate(0deg)等于：

transform: matrix(1, 0, 0, 1, 0, 0);

rotate(90deg)等于：

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

rotate(180deg)等于：

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

rotate(270deg)等于：

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

skew

skew同rotate，还是不要用复杂的matrix了

镜像对称效果

对于这种需求，使用matrix再好不过

左右镜像对称

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

上下镜像对称

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

或者：

transform: scale(-1);