css3实现了对元素执行2D平面变换，以及视觉上的3D空间变换，2D变换平时可能用的较多，3D效果也能锦上添花；
关于坐标轴
初中数学的几何学里我们便开始接触坐标轴，最基本的是平面直角坐标系
XoY ，然后延伸出空间直角坐标系
XYZ ，现在我们来说一下css中的坐标系；css甚至一下设备相关的开发中，基本都遵循这样一套坐标系：以手机屏幕为例，坐标系 圆点 位于屏幕最左上角； x轴 水平，向右为正方向； y轴 垂直，向下为正方向； z轴 垂直于整个屏幕平面，向外为正方向，就是屏幕光线射向你眼睛的方向；
如图：
2D变换
包括平移
translate() ，旋转
rotate() ，缩放
scale() ，倾斜
skew() ，矩阵
matrix() ；translate(x,y)
平移操作，包括
translateX(x) ,
translateY(y) ，括号内填平移参数值，可以是负值，即反方向；例如：
div {
/*元素向右平移50px，向下移60px*/
transform: translateX(50px);
transform: translateY(60px);
}
/*简写形式，效果相同*/
div {
transform: translate(50px, 60px);
}注意
translate() 只指定一个值则默认是 x轴 位移，即水平移动；rotate(deg)
元素旋转，括号中参数为旋转角度， 顺时针 为正值， 逆时针 为负值，单位为
deg ，即多少度；例如：
div {
/* 顺时针旋转30° */
transform: rotate(30deg);
}
scale(x,y)
缩放元素，参数分别为x轴，y轴缩放倍数，包括
scaleX(x) 和
scaleY(y) ，提供一个参数表示 按比例 缩放；例如：
div {
/* 横向缩小一半，纵向放大一倍 */
transform: scale(.5, 2);
