今日学习内容：2D转换之位移、旋转(包括旋转原点的设置)、缩放、倾斜；3D转换之位移、旋转、缩放、倾斜。
总结如下要点：
(一)2D转换
(若想看到变换效果，要给图形的盒子设置过渡transition:3s)
1.位移
语法=>transform:translate(x,y)
其中x表示水平方向的位移(即左右)，y表示垂直方向的位移(即上下)。
括号内最多只能有2个值，当只有1个值的时候表示水平位移。
值的大小可以为正数，也可以为负数。当值为负数的时候向反方向移动。
值的单位可以为像素(如100px，-100px)，也可以为百分比(如50%，-50%)。当值用百分比来表示的时候，参照的是元素translate所在盒子的大小。
translate属性不脱标！
2.旋转
语法=>transform：rotate()
括号内表示旋转的角度，必须使用单位deg。
当括号内的值为正数时，表示顺时针旋转；为负数时，表示逆时针旋转。
div{
transform:rotate(9deg)
-ms-transform:rotate(9deg) /* Internet Explorer */
-moz-transform:rotate(9deg) /* Firefox */
-webkit-transform:rotate(9deg) /* Safari 和 Chrome */
}
这是css3 的2d转换 确实能实现将背景图旋转。（9deg是选择角度 自己调整）
但是！ 他会把div里面的所有内容都旋转掉(如果里面有文字或者其他也都会被影响而旋转)！
2D转换方法:
translate()
rotate()
scale()
skewX()
skewY()
matrix()
