CSS3 : transform 用于元素样式的转变，比如使元素发生位移、角度变化、拉伸缩小、按指定角度歪斜
transform结合transition可实现各类动画效果
transform ：
transform 兼容各浏览器写法如下：
transform: /* 转变样式 */;
-ms-transform: /* 转变样式 */; /* IE 9 */
-webkit-transform: /* 转变样式 */; /* Safari and Chrome */
-o-transform: /* 转变样式 */; /* Opera */
-moz-transform: /* 转变样式 */; /* Firefox */
可转变样式如下：
1、使元素位置移动：translate，语法：translate(x坐标, y坐标)
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
以上代码使元素位置横向移动50像素，纵向移动100像素
2、使元素按指定角度旋转多少度：rotate，语法： rotate(角度值deg)
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
以上代码使元素顺时针旋转30度，如果值是负值，则是逆时针旋转
3、使元素按指定的倍数拉伸或缩小，里面的字体也会同时拉伸或缩小：scale，语法：scale(X轴倍数, Y轴倍数)
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
以上代码使元素的宽度拉伸2倍，高度拉伸4倍
4、使元素歪斜给定的角度：skew，语法：skew(x轴角度值deg,y轴角度值deg)
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
transform-origin：
transform-origin用于设置旋转元素的基点位置，兼容语法：
transform-origin: /* 位置设置 */;
-ms-transform-origin: /* 位置设置 */;
-webkit-transform-origin: /* 位置设置 */;
-moz-transform-origin: /* 位置设置 */;
-o-transform-origin: /* 位置设置 */;
位置设置，分三处设置，语法：
transform-origin: x-axis y-axis z-axis;
x-axis ： X轴线位置
y-axis ：Y轴线位置
z-axis ： Z轴线位置
位置可以是具体数值、百分比、left、right、center
数值示例：
transform-origin:0 100;
百分比示例：
transform-origin:20% 40%;
默认值设置：
transform-origin: left center;