CSS3 : transform 与 transform-origin 属性可以使元素样式发生转变

CSS3 : transform 用于元素样式的转变，比如使元素发生位移、角度变化、拉伸缩小、按指定角度歪斜

transform结合transition可实现各类动画效果

transform 兼容各浏览器写法如下：

1 transform:              /* 转变样式 */;
2 -ms-transform:          /* 转变样式 */;        /* IE 9 */
3 -webkit-transform:      /* 转变样式 */;        /* Safari and Chrome */
4 -o-transform:           /* 转变样式 */;        /* Opera */
5 -moz-transform:         /* 转变样式 */;        /* Firefox */

可转变样式如下：

1、使元素位置移动：translate，语法：translate(x坐标, y坐标)

1 transform: translate(50px,100px);
2 -ms-transform: translate(50px,100px);        /* IE 9 */
3 -webkit-transform: translate(50px,100px);    /* Safari and Chrome */
4 -o-transform: translate(50px,100px);        /* Opera */
5 -moz-transform: translate(50px,100px);        /* Firefox */

以上代码使元素位置横向移动50像素，纵向移动100像素

2、使元素按指定角度旋转多少度：rotate，语法： rotate(角度值deg)

1 transform: rotate(30deg);
2 -ms-transform: rotate(30deg);        /* IE 9 */
3 -webkit-transform: rotate(30deg);    /* Safari and Chrome */
4 -o-transform: rotate(30deg);        /* Opera */
5 -moz-transform: rotate(30deg);        /* Firefox */

以上代码使元素顺时针旋转30度，如果值是负值，则是逆时针旋转

3、使元素按指定的倍数拉伸或缩小，里面的字体也会同时拉伸或缩小：scale，语法：scale(X轴倍数, Y轴倍数)

1 transform: scale(2,4);
2 -ms-transform: scale(2,4);    /* IE 9 */
3 -webkit-transform: scale(2,4);    /* Safari 和 Chrome */
4 -o-transform: scale(2,4);    /* Opera */
5 -moz-transform: scale(2,4);    /* Firefox */

以上代码使元素的宽度拉伸2倍，高度拉伸4倍

4、使元素歪斜给定的角度：skew，语法：skew(x轴角度值deg,y轴角度值deg)

1 transform: skew(30deg,20deg);
2 -ms-transform: skew(30deg,20deg);    /* IE 9 */
3 -webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
4 -o-transform: skew(30deg,20deg);    /* Opera */
5 -moz-transform: skew(30deg,20deg);    /* Firefox */

transform-origin：

transform-origin用于设置旋转元素的基点位置，兼容语法：

1 transform-origin:    /* 位置设置 */;
2 -ms-transform-origin:  /* 位置设置 */;
3 -webkit-transform-origin:  /* 位置设置 */;
4 -moz-transform-origin:  /* 位置设置 */;
5 -o-transform-origin: /* 位置设置 */;

位置设置，分三处设置，语法：

1 transform-origin: x-axis y-axis z-axis;

x-axis ： X轴线位置

y-axis ：Y轴线位置

z-axis ： Z轴线位置

位置可以是具体数值、百分比、left、right、center

数值示例：

1 transform-origin:0 100;

百分比示例：

1 transform-origin:20% 40%;

默认值设置：

1 transform-origin: left center;