transform样式

transform属性应用于元素的2D或3D转换。
这个属性允许你将元素旋转（rotate），缩放（scale），移动(translate)，倾斜(skew)等。

1. 变化样式之旋转

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* 顺时针旋转45度角 */
            transform: rotate(45deg);
        }

2. 变化样式之位移样式

3. 变化样式之缩放

transform：scale（倍数1, 倍数2）；/设置元素的缩放倍数/
倍数: 0~1之间, 元素缩小(倍数为0元素消失不见)
倍数 : >1 , 元素放大
倍数: <0, 元素倒置( -1~0, 倒置缩小, 小于-1, 倒置放大 )

倍数1:定义元素水平方向的缩放倍数;
/可以单独用scaleX()来设置/
倍数2 :定义元素垂直方向的缩放倍数;
/可以单独用scaleY()来设置/

4. 变化样式之倾斜

transform：skew（角度1, 角度2）；/设置元素的倾斜数据/
角度1: 定义元素水平方向的倾斜角度;/可以单独用skewX()来设置/
角度2: 定义元素垂直方向的倾斜角度;/可以单独用skewY()来设置/

5. 变化样式之变化原点

每个元素都有一个transform-origin（变化原点）样式，其默认位置正好位于元素的水平中心和垂直中心线的交叉点