一看到“2D矩阵”这个高大上的名词,有的同学可能会有种畏惧感,“矩阵”,看起来好高深的样子,我还是看点简单的吧。其实本文就很简单,你只需要有一点点css3 transform的基础就好。
<p class="my_title">没有前戏,直奔主题
方法分别是scale()、translate()、rotate()和skew(),可以说这4个方法是css3矩阵matrix的快捷方式,因为这4个方法本质都是由matrix实现的。类似地,在canvas中,与前3种变化对应的3个方法分别是scale()、translate()、rotate(),canvas对象没有skew()方法。css3中的矩阵和canvas矩阵原理是相通的,所以这里只说css3的矩阵matrix,两者有一些区别,后面会说。
方法有六个参数matrix(a,b,c,d,x,y),六个参数默认值是matrix(1,1,0),这六个参数分别控制不同的变换
a 水平缩放
b 水平拉伸
c 垂直拉伸
d 垂直缩放
x 水平位移
y 垂直位移
可以运行下面的demo,改动对应的参数查看效果