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);} |
| div { /* 按比例放大3倍 */ transform: scale(3);} |
skew(xdeg,ydeg)
包含 skewX(deg) , skewY(deg) ，表示在水平和垂直方向倾斜的角度；
例如：
| div { transform: skewX(30deg); transform: skewY(45deg);}/* 简写 */div { transform: skew(30deg, 45deg);} |
需要 注意 ，如果元素为一个矩形，那么 skewX(30deg)
新闻热点
疑难解答
