CSS3的新特性；

CSS3 Transform 转换（制作旋转、位移、缩放等效果详解）；

transform 的属性包括：旋转 rotate()、位移 translate()、缩放 scale()和扭曲(倾斜) skew()以及矩阵变形matrix()。

tip: transform 中使用多个属性时却需要有空格隔开

旋转

rotate() 旋转函数 取值度数
deg 度数
transform:rotate(30deg)
值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转

位移

translate(x,y) 水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动），如：
transform:translate(100px,20px)
translateX(x) 仅水平方向移动（X轴移动），如：transform:translateX(100px)
translateY(y) 仅垂直方向移动（Y轴移动），如：transform:translateY(20px)

缩放

scale(x,y)使元素水平方向和垂直方向同时缩放（X轴和Y轴）,如：transform:scale(2,1.5)
scaleX(x)元素仅水平方向缩放（X轴缩放）,如：transform:scaleX(2)
scaleY(y)元素仅垂直方向缩放（Y轴缩放）,如：transform:scaleY(2)
它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
如果scale(x,y)没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的,并以X为准。

倾斜

skew(x,y) 使元素在水平和垂直方向同时扭曲（X轴和Y轴），如：transform:skew(30deg,10deg)
skewX(x) 仅使元素在水平方向扭曲变形（X轴），如：transform:skewX(30deg)
skewY(y) 仅使元素在垂直方向扭曲变形（Y轴），如：transform:skewY(10deg)

改变元素基点 transform-origin

主要作用就是让我们在进行transform动作之前可以改变元素的基点位置，因为元素默认基点就是其中心位置。

渐变

规定动画@keyframes

媒体查询