概述：css3中的transform中有旋转，放缩，倾斜，平移的功能，分别对应的属性是：rotate，scale，skew，translate
1、旋转，利用rotate来实现，代码如下：
-webkit-transform:rotate(10deg)指定浏览器内核为webkit的翻转方式
-moz-transform:rotate(10deg)指定firefox浏览器私有属性
transform:rotate(10deg)一般浏览器翻转的角度为10弧度
2、 翻转，利用scale来实现，代码如下：
scale本来是放缩的意思，原来括弧里面（1，1）前者表示X轴，后者表示Y轴，当数字大于1时放大，大于0并小于1时缩小，负数代表翻转
水平翻转：
-webkit-transform:scale(-1，1)水平轴为-1，代表水平翻转
-moz-transform:scale(-1，1)水平轴为-1，代表水平翻转
transform:scale(-1，1)水平轴为-1，代表水平翻转
垂直翻转：
-webkit-transform:scale(1，-1)垂直轴为-1，代表垂直翻转
-moz-transform:scale(1，-1)垂直轴为-1，代表垂直翻转
transform:scale(1，-1)垂直轴为-1，代表垂直翻转
一、scale()方法
缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。
跟translate()方法一样，缩放scale()方法也有3种情况：
（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；
（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；
（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；
scale有2个参数。
是缩放元素。1、scale(x,y)对元素进行缩放X表示水平方向缩放的倍数|Y表示垂直方向的缩放倍数Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。transform:scale(2,2.5)
2、scaleX()元素只在X轴（水平方向）缩放元素。默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点transform:scaleX(2)
3、scaleY()元素只在Y轴（垂直方向）缩放元素。基点一样在元素的中心位置。可以通过transform-origin来改变基点。transform:scaleY(2)
最后我们看看兼容性写法：
代码如下:
.test{
-moz-transform:scale(2,2)
-webkit-transform:scale(2,2)
-o-transform:scale(2,2)
background:url(img/i.png)no-repeat
width:198px
height:133px
}
