CSS3 Transform（2D变换）

CSS3 2D变换函数包括：translate()、scale()、rotate()和skew()。

transform属性：

transform: none|transform-functions;

transform属性让元素在一个坐标系中变形，包含一系列变形函数，移动、缩放和旋转元素。可同时对一个元素进行变形的多种属性操作，在多个变形函数使用时需要用空格隔开。

transform-origin属性：

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

该属性用来指定元素的中心点位置，默认变形原点在元素中心，即X轴和Y轴的50%处。

该属性有多种写法，此处简单列出常用的几种：（图转）

2D变形函数：

translate()函数：变换元素在水平和垂直偏移！

translate(dx) 水平移动
translate(dx, dy)
translateX(dx) 水平移动
translateY(dy) 纵轴方向移动

可以取一个值dx,也可以取dx,dy，取正值向坐标轴X,Y正方向移动，反之反向移动。translate类型与相对定位！

---

用 CSS3 属性的垂直水平居中方法：

.center {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%); 
    }

---

translate 与绝对定位、相对定位的区别：

1.translate和使用相对定位元素的 offsetLeft 和 offsetTop 属性不同：（从页面布局的角度看）

使用translate定位的元素在 offsetTop 和 offsetLeft始终固定不变的，等于该元素到文档的原始left和top，无论水平垂直移动了多少都是没影响d！

而使用相对定位的元素的offsetTop 和 offsetLeft 的数值则根据移动位移的长度发生相应变化。

这点估计会让js编程获取不到相应的值而蒙蔽哈哈哈！

2.translate和使用绝对定位实现的动画效果：（从动画角度来说）

使用 translate 来制作的动画比绝对定位的动画更加平滑！

原因在于使用绝对定位的动画效果会受制于利用像素(px)为单位进行位移，而使用 translate 函数的动画则可以不受像素的影响，以更小的单位进行位移。translate可以让 GPU 参与运算，动画的 FPS 更高。

总结：position 是为页面布局而服务！transform 是为动画而生的！

3.scale()函数： 水平和垂直的缩放

scale(sx, sy) 取值 正数、负数和小数
scaleX()
scaleY()

这个看文档就行，没什么好介绍的(●’◡’●)，要学会翻墙哦
http://www.w3school.com.cn/jsref/met_canvasrenderingcontext2d_scale.asp

4. rotate()函数：旋转元素

rotate(a)：取正值顺时针旋转，负值逆时针旋转

注意点：
1.默认旋转中心为元素的中心,可以修改transform-origin来修改旋转基准点。

2.旋转元素的内容或者子元素都会跟着旋转，此时可以通过反向旋转来抵消。

.parent{
transform: rotate(-36deg);
}
.children{
transform: rotate(36deg);
}

5.skew()函数：元素水平垂直方向倾斜

skew(ax)
skew(ax,ay)
skewX(x)
skewY(y)

同样，默认变形基准点为元素中心，可通过transform-origin属性来更改。

应用：制作倾斜导航！技巧：父斜子反斜！，就可以制作特殊的形状啦！

---

总结：总结了CSS3中的2D变换，四大变形函数，以及translate 与绝对定位、相对定位的区别，rotate()函数的应用技巧和shew()函数的使用场景和技巧！打好基础，才能很好运用CSS3中的3D变换。