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可以实现其他更多复杂的功能。