标签：
没有多余的元素，也没有多余的代码，一个简单的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，我就先来看一下它：
给demo加上样式
1 .demo{ 2 width:100px; 3 height:100px; 4 background:#eee; 5 transform:translateX(50px); 6 }
可以看到它往右移动了50px：
同样再试试Y轴的：
1 .demo{ 2 width:100px; 3 height:100px; 4 background:#eee; 5 transform:translateY(50px); 6 }
可以看到它往下移动了50px：
如果想要在X轴移动100px，Y轴移动20px，不用写两遍，直接translate(100px,20px)就可以了：
1 .demo{ 2 width:100px; 3 height:100px; 4 background:#eee; 5 transform:translate(100px,20px); 6 }
看看效果：
刚刚看了水平方向的移动，现在再试试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。
当然translate里的值可以是百分百，也可以是负数。当然translate里的值可以是百分百，也可以是负数。
rotate(angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)
rotate3d(x,y,z,angle)
scaleX(y)
scaleY(y)
scale(x,y)
scaleZ(z)
scale3d(x,y,z)
skew
matrix(n,n,n,n,n,n)
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
标签：
原文地址：http://www.cnblogs.com/iseesea/p/4547030.html
