CSS3 transform

CSS3的transform属性引入了许多方法用于元素位置形状等进行变换，每个方法列在下边（省略prefix）

transform: translate(dx, dy) /* 表示元素平面内平移的距离分别为dx,dy；对应有translateX()和translateY() */transform: rotate(deg)  /* 正值表示顺时针旋转，单位为角度 */transform: scale(x-coords, y-coords)  /* 在x轴和y轴方向进行伸缩变化;对应有scaleX()和scaleY() */transform: skew(x-coords, y-coords) /* 沿着水平和竖直方向翻转;对应有skewX()和skewY() */

使用Vue的transform属性时，由于要同时设置translateX()和rotate()方法，在一个transition中设置时只有一个能够正常执行，因此需要需要使用到transform: matrix()方法。matrix共有6个参数，此处设为matrix(a,b,c,d,e,f)

• 平移变换： 仅与e, f相关，其中e和f分别表示水平方向和垂直方向的平移距离

• 伸缩变换：与a, d相关，其中a和d分别表示水平方向和垂直方向的伸缩量

• 旋转：旋转变化与a, b, c, d四个参数有关，对应表示为matrix(cosα, sinα, -sinα, cosα, 0, 0)

• 翻转：matrix(1, tanα, tanβ, 1, 0, 0)，其中tanα和tanβ分别表示沿着水平轴和垂直轴的翻转角度

结合matrix可以实现其他更多复杂的功能。