transform是css3新增加的， 能够对元素进行移动、缩放、转动、拉长或拉伸，首先我们来说说rotate()。
①rotate()是2D的转换方法，他接收一个参数，deg（度），可以传入任意度数，默认是顺时针旋转，传入负数则是逆时针旋转。
transform的旋转是根据中心点进行旋转的，这一点可以用transform-origin来改变。注意，无论你如何旋转offsetWidth、offsetHeight、offsetLeft、offsetTop始终不变，始终是默认不旋转时的值。
②移动的translate()
- 我们可以把他划分为三种情况：translate(x,y) => 水平垂直两个方向同时移动
应该有部分的人会认为这和定位差不多，都是用来控制元素位置的，但是实际上他和定位相比有很大的出入，有积极的影响也有消极的影响。translateX(x) => 他只有一个参数，即水平移动 translateY(y) => 他只有一个参数，即垂直移动
translate()的计算是相对于父元素，除非脱离普通流。
设置了transform:translate(10px,0px)让他往左便宜10像素，再来看看下面的代码。
之后给他加了绝对定位，意料之中，他脱离文本流，但是他的left值会在translate的基础上再偏移10像素。
他可能相对于定位来说会比较灵活，但是之后我又取消了绝对定位，给他加了一段js，局限性就显而易见了。
translate的偏移量没有算在offsetLeft里，既然没有算在offsetLeft里，那会对我们的操作有一定的影响。
③scale()放大缩小，默认，宽度以中心点向左右两边扩大或缩小，高度则向上下两边扩大或缩小。
可以看到在扩大缩小时一般会覆盖其他元素。注意，无论你如何扩大或缩小offsetWidth、offsetHeight、offsetLeft、offsetTop始终不变，始终是默认不变时的值。。
④skew()翻转
transform:skew(30deg,30deg);表面上看这个方法挺好理解，也就是沿着x轴与y轴各旋转30度，但是后来显示的图形又让我很不理解。
这还看不出什么，如果改为60deg+就很离谱了，之所以会产生变形的，这是因为我给元素限定的高度是固定的，所以他都会保持着固定的高度，同时为了保持倾斜，只能拉长本身。
这是skewY(),因为给了固定宽度，所以只能垂直拉伸，宽度固定。