transform相关的CSS属性

transform是变幻的意思,其本质是数学中的矩阵变幻。

transition相关属性是CSS3提供的,IE9及以下版本不支持这些属性。

safari3.1-6、iOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀。

transform通常与transition联合使用,创建丰富的交互体验。

1.1、transform属性

transition的使用格式:

transition : function(args)
1.1.1、rotate(deg)

将元素进行旋转,参数是一个角度值,单位为deg,且必须带上该单位。

示例:

transition: rotate(45deg)
1.1.2、translate(x [,y])

将元素进行平移。参数有两个,分别表示向X轴和向Y轴进行平移的量,单位为px。 如果第二个参数不写,表示Y轴方向不平移。

示例:

transition: translate(20px,30px)
1.1.3、scale(x [,y])

将元素进行放大或缩小。参数有两个,分别表示向X轴和Y轴进行缩放的倍数,范围在0~正无穷。 第二个参数不写就表示与第一个参数相同。也就是等比例缩放。

示例:

transition: scale(2)
1.1.4、skew(x [,y])

将元素进行斜切变化。参数有两个,都是角度,单位是deg。 两个参数分别表示X轴Y轴的斜切变化角度,如果第二个参数不填写,表示Y轴不进行斜切变化。

示例:

transition: skew(45deg)
1.1.5、matrix(a,b,c,d,tx,ty)

指定一个变幻矩阵。

如果你对数学中的矩阵非常清楚的话,可以使用它。abcd四个数字组成一个如下的二维矩阵:

┌     ┐
│ a c │
│ b d │
└     ┘

a:X轴缩放比例

b:Y轴缩放比例

c:Y轴倾斜

d:X轴倾斜

tx,ty是基于X和Y坐标重新定位元素。其实就是translate(tx,ty)

示例:

.music-disc {
    transition: transform 2s linear 200ms;
}

.music-disc:hover {
    transform : rotate(180deg)
}
1.1.6、none

这表示不做任何变幻。

1.2、transform-origin属性

我们在做变幻的时候,总是要有个参照点的,默认都是HTML元素的中心点。实际上,这是可以设置的,transform-origin属性就是参考点。

transform-origin属性的取值可以是lefttoprightbottomcenter等, 也可以是(x,y)具体坐标。

示例:

.music-disc {
    transition: transform 2s linear 200ms;
}

.music-disc:hover {
    transform : rotate(180deg);
    transform-origin: left;
}