CSS3:中的transfom转换及涉及translate：（30%， 50%）

translate()函数是css3的新特性

translate值（50px，100px）是往左（x轴）移动50个像素，并往上（y轴）移动100像素。顺序是（left,top）:即（X,Y）值

translate值（10%，60%）是往左走自己盒子宽度的10%，往上走自己盒子高度的60%。（无论任何时候：包括旋转）

rotate值（30deg）元素顺时针旋转30度。

perspective 作为transform一个属性值，一般设置给父元素，经过研究，范围一般设置在800-1000px最满足人的3d视觉效果，作用于所有3D转换的子元素

PS：另外：transform 多值先后执行顺序

1、translate的百分比取值基准元素自身的宽(x)和高(y)来确定移动的距离。

2、rotate()旋转的时候会旋转坐标轴

3、注意：一般建议将旋转放在最后。

transform: translateX(200px) rotate(90deg) ;  //先平移，后旋转

transform: rotate(90deg) translateX(200px);//先旋转，后平移