目前，css3发展还是比较迅速的，有几个属性：变形(transform)、转换(transition)和动画(animation)。在用CSS3制作动画时，我们经常使用的。
今天我们主要讲变形(transform)属性，那么 Transform到底是什么意思？我们从字面上理解就是变形，改变、变换的意思。
是的，在CSS3中，我们可以用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动等的变形。那么transform包括哪些属性呢？
transform的属性包括：
旋转rotate()、 扭曲skew()、 缩放scale()、 移动translate()、矩阵变形matrix()。
分别还有x、y之分，比如：rotateY() 和 rotateY() ，以此类推。我们可以将这几种变形结合使用，就会产生不同的效果。
transform浏览器兼容：
目前浏览器支持情况：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+
接下来我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现，首先从transform的语法说起。
语法：
transform ： none | <transform-function> [ <transform-function> ]*
具体就是：
transform: rotate | scale | skew | translate |matrix;
none:表示不进么变换；<transform-function>表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，大家要记住的一点就是transform中使用多个属性时，需要有空格隔开。
比如：
transform:otate(45deg) scale(1.5);
下面是分别对他们进行分析：
一、旋转rotate
CSS中使用rotate方法来实现对元素的旋转，在参数中加入角度值。
rotate(<angle>) ：通过指定的角度参数对原元素实现一个2D rotation（2D 旋转），其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。
我们使用时需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，如果没有定义时，元素默认就以自己中心位置进行变化的。
下面我们来看一下示例：
首先说明一下，本节例子demo公用的css为：
公用css：
.wrap-bg{
width:300px;
height:150px;
background:#000;
margin-left:50px;
}
.wrap-bg div{
width:100px;
height:100px;
background:#34A737;
}
示例：transform:rotate(45deg);
html:
<div class="wrap-bg"><div class="demo"></div></div>css:
.demo{
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg)
}
效果：
二、移动translate
移动translate我们分为三种情况：
1、translate(length,length):指定对象的X轴（水平方向）和Y轴（垂直方向）同时移动。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0。
2、translateX(length):指定对象X轴（水平方向）的平移。
3、translateY(length):指定对象Y轴（垂直方向）的平移。
length可以取正负值，X轴为负值时向左平移，Y轴为负值时向上平移，也可以根据transform-origin进行改变基点
示例：transform:translate(50px,20px):
css:
.demo1{
-moz-transform:translate(30deg);
-webkit-transform:translate(50px,20px);
transform:translate(50px,20px)
}
效果：
三、缩放scale
缩放scale同样也分为三种情况：
1、scale(<number>[,<number>]): scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）。
2、scaleX(<number>) : scaleX(x)指定对象X轴的（水平方向）缩放
3、scaleY(<number>) : scaleY(y)指定对象Y轴的（垂直方向）缩放
<number>是缩放的倍数，如果其值大于1元素就放大，反之其值小于1，元素缩小。它们缩放中心点就是元素的中心位置。也可以通过transform-origin对元素的基点进行设置。
示例：transform:scale(2,1);
css:
.demo2{
-moz-transform:scale(2,1);
-webkit-transform:scale(2,1);
transform:scale(2,1)
}
效果：
四、扭曲skew
扭曲skew同样也分为三种情况：
1、skew(<angle>[,<angle>]):指定对象skew transformation(斜切扭曲)。第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。
2、skewX(<angle>) : 指定对象X轴的（水平方向）扭曲
3、skewY(<angle>) : 指定对象Y轴的（垂直方向）扭曲
同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点。
示例：transform:skew(45deg,30deg);
css:
.demo3{
-moz-transform:skew(45deg,30deg);
-webkit-transform:skew(45deg,30deg);
transform:skew(30deg,30deg)
}
效果：
五、矩阵matrix
matrix(<number>, <number>, <number>, <number>, <number>, <number>) ： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵,在此我们简单了解
下CSS3中的transform还有这么一个属性值。
示例：
css:
.demo4{
-moz-transform:matrix(0,1,1,1,10,10);
-webkit-transform:matrix(0,1,1,1,10,10);
transform:matrix(0,1,1,1,10,10);
}
效果：
六、关于transform-origin说明
关于transform-origin，他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置，没有使用transform-origin改变元素基点位置的情况下，我们元素默认基点就是其中心位置。但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。下面我们主要来看看其使用规则：
transform-origin:X Y:用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值。
下面我列出他们相对应的写法：
1、top left | left top 等价于 0 0 | 0% 0%
2、top | top center | center top 等价于 50% 0
3、right top | top right 等价于 100% 0
4、left | left center | center left 等价于 0 50% | 0% 50%
5、center | center center 等价于 50% 50%（默认值）
6、right | right center | center right 等价于 100% 50%
7、bottom left | left bottom 等价于 0 100% | 0% 100%
8、bottom | bottom center | center bottom 等价于 50% 100%
9、bottom right | right bottom 等价于 100% 100%
具体示例： transform-origin:left top
css:
.demo5{
-moz-transform-origin:left top;
-webkit-transform-origin:left top;
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
transform:rotate(30deg)
}
效果：
