transform样式讲解
transform属性应用于元素的2D或3D转换。
这个属性允许你将元素旋转（rotate），缩放（scale），移动(translate)，倾斜(skew)等。
transform：rotate（角度值）；设置元素绕着中心的旋转效果
角度值为正，元素顺时针旋转；角度值为负元素，逆时针旋转
transform: rotate(20deg);
transform：translate（偏移量1, 偏移量2）；设置元素以自身初始位置为原点的偏移效果
偏移量1:定义元素水平方向的偏移量;可以单独用translateX()来设置
偏移量2:定义元素垂直方向的偏移量;;可以单独用translateY()来设置
注意：在transform的复合写法中，transform：rotate（）translate（）；与transform：translate（） rotate（）因为顺序不同，所以导致的结果也是不相同的。
scale(x, y)缩放
transform：scale（倍数1, 倍数2）；/设置元素的缩放倍数/
倍数: 0~1之间, 元素缩小(倍数为0元素消失不见)
缩放的值：① >1放大 ② 1>x>0缩小 ③ 0>x>-1元素倒置缩小 ④ <-1元素倒置放大
transform：skew（角度1, 角度2）；/设置元素的倾斜数据/
角度1: 定义元素水平方向的倾斜角度;/可以单独用skewX()来设置/
角度2: 定义元素垂直方向的倾斜角度;/可以单独用skewY()来设置
变化样式之变化原点transform-origin
默认值为transform-origin:50% 50%; /变化原点：水平位置 垂直位置/
每个元素都有一个transform-origin（变化原点）样式，其默认位置正好位于元素的水平中心和垂直中心线的交叉点。