没有多余的元素，也没有多余的代码，一个简单的transform移动轻松实现了元素在页面内的水平垂直居中，CSS3果然是一个需要深入探索的东西，而好记性不如烂笔头...
好了，英语学习时间到：transform，变换、改变的意思，在CSS3里它可以让元素改变位置（translate）、改变旋转角度（rotate）、改变大小比例（scale）、让元素倾斜扭曲（skew）、还有元素的矩阵变形（matrix），transform不仅可以2D转换，还能进行3D转换，这简直是Photoshop才能做的事啊，太厉害有木有！
学了一个transform，多认识了6个单词，感觉棒棒哒~
为了演示这几个效果，简单做个html页面出来：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 .wrap{
8 width:500px;
9 height:200px;
10 margin:100px auto;
11 background:#bbb;
12 border:1px solid #aaa;
13 }
14 .box{
15 width:100px;
16 height:100px;
17 margin:50px auto;
18 border:2px solid #000;
19 }
20 .demo{
21 width:100px;
22 height:100px;
23 background:#eee;
24 }
25 </style>
26 </head>
27 <body>
28 <div class="wrap">
29 <div class="box">
30 <div class="demo"></div>
31 </div>
32 </div>
33 </body>
34 </html>
页面预览效果如下：
既然一个接触到的是translate，我就先来看一下它：
1、transform移动：translate
1-1 2D移动
translateX(x)：在X轴水平移动
给demo加上样式
1 .demo{
2 width:100px;
3 height:100px;
4 background:#eee;
5 transform:translateX(50px);
6 }
可以看到它往右移动了50px：
translateY(y)：在Y轴水平移动
同样再试试Y轴的：
1 .demo{
2 width:100px;
3 height:100px;
4 background:#eee;
5 transform:translateY(50px);
6 }
可以看到它往下移动了50px：
translate(x,y)：在X，Y轴水平移动，只填一个值，默认为X轴
如果想要在X轴移动100px，Y轴移动20px，不用写两遍，直接translate(100px,20px)就可以了：
1 .demo{
2 width:100px;
3 height:100px;
4 background:#eee;
5 transform:translate(100px,20px);
6 }
看看效果：
1-2 3D移动
translateZ(z)：在Z轴移动，也就是前后移动
刚刚看了水平方向的移动，现在再试试3D的，给它的Z轴加个试试：
1 .demo{
2 width:100px;
3 height:100px;
4 background:#eee;
5 transform:translateZ(100px);
6 }
还在原来的位置，什么都没变，这是为什么呢？
我们的网页它是平面的，如果想要看到一个3D的效果，需要让它的父级转为3D视图模式（transform-style:preserve-3d），再设置它的景深（perspective），这个值说白了就是假设我在距离多远的地方看它。这一块儿等会儿再介绍吧~但一定要记得，要进行3D的转换，父级一定要设置为transform-style:preserve-3d，并且设置它的perspective。
translate3d(x,y,z)：3D的位移，等会儿再看
当然translate里的值可以是百分百，也可以是负数。当然translate里的值可以是百分百，也可以是负数。
2、transform旋转：rotate
2-1 2D旋转
rotate(angle)
2-2 3D旋转
rotateX(angle)
rotateY(angle)
rotateZ(angle)
rotate3d(x,y,z,angle)
3、transform比例缩放：scale
3-1 2D缩放
scaleX(y)
scaleY(y)
scale(x,y)
3-2 3D缩放
scaleZ(z)
scale3d(x,y,z)
4、transform倾斜扭曲：skew
4-1 2D倾斜
skew
4-2 3D倾斜
5、transform矩阵：matrix
5-1 2D
matrix(n,n,n,n,n,n)
5-2 3D
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)