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

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

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

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

transition的使用格式：

transition : function(args)

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

示例：

transition: rotate(45deg)

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

示例：

transition: translate(20px,30px)

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

示例：

transition: scale(2)

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

示例：

transition: skew(45deg)

指定一个变幻矩阵。

如果你对数学中的矩阵非常清楚的话，可以使用它。a、b、c、d四个数字组成一个如下的二维矩阵：

┌     ┐
│ 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)
}

这表示不做任何变幻。

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

transform-origin属性的取值可以是left、top、right、bottom、center等， 也可以是(x,y)具体坐标。

示例：

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

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