CSS3 2D变换

位移：

div {
    transform: translateX(30px);        /*水平位移*/
    transform: translateY(30px);		/*垂直位移*/
    transform: translate(30px, 30px);   /*两个方向位移*/
}

注意：位移的百分比是元素本身，不是父元素

div {
    transform: translateX(30%);
    transform: translateY(30%);
}

1. 位移与相对位移很相似，都不脱离文档流，不会影响到其他元素。
2. 与相对定位的区别：相对定位的百分比值，参考的是其父元素；位移的百分比值，参考的是其自身。
3. 浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。
4. 位移对行内元素无效
5. 位移配合定位可以实现元素水平垂直居中

.box{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

---

缩放：

div{
	transform:scaleY(1.5); /*垂直缩放1.5倍*/
	transform:scaleX(1.5); /*水平缩放1.5倍*/
	transform:scale(1.5);  /*水平和垂直两个方向缩放1.5倍*/
}

注意：

1. scale的值，是支持写负数的，但几乎不用，因为容易让人产生误解。
2. 借助缩放，可实现小于12px的文字。

---

旋转：

div{
	transform:rotateZ(20deg); /*向右旋转20度*/
	transform:rotate(20deg);/*只设定一个值代表2D旋转*/
}

设置旋转角度需要制定一个角度值(deg)，正值顺时针，负值逆时针

---

扭曲：

div{
	transform:skewX(30deg); /*水平方向扭曲*/
	transform:skewY(30deg); /*垂直方向扭曲*/
	transform:skew(30deg,30deg);/*水平方向和垂直方向扭曲*/
}

注意：
skew一个值表示skewX，两个值分别代表skewX、skewY

---

多重变换：

多个变换可以同时使用一个transform来编写
transform：translate(-50%,-50%) rotate(45deg);
注意：多重变换时，建议最好旋转

---

变换原点：

/* 通过关键词调整变换原点 */
transform-origin:right bottom;
/* 通过具体像素值调整变换原点 */
transform-origin:50px 50px;
/* 通过百分比调整变换原点 */
transform-origin:25% 25%;

注意：
如果只提供一个，若是像素值，表示横坐标，纵坐标取50%；若是关键词，则另一个坐标取50%