CSS3：2D转换之旋转rotate及改变旋转的中心点transform-origin

2D旋转指的是让元素在2维平面内顺时针或逆时针进行旋转。（和transition过渡搭配使用效果体验更好）
语法格式：
transform:rotate(度数);
注意点：
rotate里面跟的是度数，单位是deg，例如transform:rotate(180deg)，就是说旋转180度；
角度为正时，是顺时针旋转，为负时，是逆时针旋转，例如transform:rotate(180deg)和transform:rotate(-180deg)；
默认旋转的中心点是以元素的中心点进行旋转。

改变旋转的中心点：transform-origin
我们可以设置元素以哪个位置来进行旋转。
语法格式：
transform-origin:x y;
注意点：
后面的参数x和y用空格隔开，不是逗号；
xy默认转换的中心点是元素的中心点（50% 50%）；
还可以给xy设置像素或方位名词，例如：top bottom left right center。
如果想让元素以左下角为中心点旋转，可以这样写：

div {
		width: 120px;
		height: 120px;
		background-color: pink;
		/*跟方位名词，表示左下角 右下角就是 right bottom*/
		transform-origin: left bottom;
		transition: all .6s;
}
div:hover {
		/*跟方位名词，表示左下角 右下角就是 right bottom*/
		transform: rotate(180deg);
}