CSS3——变形功能

transform

基本写法：

-ms-transform: scale(1.5,1.5);/*IE9*/-moz-transfrom:scale(1.5,1.5);/*Firefox*/-webkit-transform: scale(1.5,1.5); /*Safari 和 Chrome*/-o-transform: scale(1.5,1.5); /*Opera*/

注：上面四行代码等价，只是兼容性问题

---

旋转：

rotate

写法：

-ms-transform: rotate(45deg);

注：deg是角度单位

---

缩放：

scale

写法：

-ms-transform: scale(1.5,1.5);/*x轴与y轴同时缩放，1是原来的大小*/

倾斜：

skew

写法：

-ms-transform: skew(30deg);/*一个值得时候默认垂直扭动,两个值的时候分别表示垂直扭动的角度，水平扭动的角度*/

移动：

translate

写法：

-ms -transform: translate(50px);/*一个值的时候默认表示水平移动多少距离，两个值的时候分别表示水平移动的距离和垂直移动的距离*/

可以多个效果一起添加：

例如：

-ms-transform: translate(50px)  scale(1.5);

改变形的基点：

什么是基点：

例如：旋转的时候默认是以div的中心旋转

写法：

例如 -webkit-transform-origin: left bottom;
把旋转中心改成左下角