2D图形转换：是在二维平面上对图形进行平移，缩放，旋转，倾斜等

1.平移

translate(number:移动的距离)平移。
值：两个值分别对应X轴 和 Y轴。
正值：往X轴，Y轴的正方向移动。
负值：往X轴，Y轴的反方向移动。

        transform: translate(100px,50px);<br />            /* 值为一个：对应的是X轴的移动距离，Y轴默认值为0 */<br />

transform: translate(100px);

        /* X轴平移 */<br />

transform: translateX(100px);

        /* Y轴平移 */<br />

transform: transform(100px);

2.缩放

/ 缩放：scale(number:元素大小的倍数)
值：两个值分别对应X轴 和 Y轴。
一个值：X轴和Y轴取值相同。/

 transform: scale(0.5);
 transform: scale(2,0.5);

        /* X轴缩放 */<br />

transform: scaleX(2);

        /* Y轴缩放 */

transform: scaleY(1.1);

3.旋转

/旋转：rotate(number:旋转的角度)。单位：deg。
值：正值：顺时针旋转。
负值：逆时针旋转。
注意：旋转的原点默认为中心点。
/

transform: rotate(60deg);

        /* 以X轴为中心点进行旋转(上下旋转)。 */<br />            transform: rotateX(90deg); <br />            /* 以Y轴为中心点进行旋转(左右旋转)。 */<br />            transform: rotateY(60deg);

        /* <br />            transform-origin:设置变换旋转原点。<br />            默认值：50% 50%，效果等同于center center。<br />            值：两个值：分别代表X轴 和 Y轴。<br />                一个值：代表X轴，另一个轴默认为center。<br />取值：<br />            1.可以使用长度单位px，百分比等。<br />            2.可以使用方向(top，left，right，bottom，center)。<br />                如果值只有一个使用方向，浏览器会自动判断该值是作用于x轴还是Y轴，另一个默认为center。<br />             */

transform-origin:top left;

4.倾斜

/ 倾斜skew(number:倾斜的角度)。单位：deg。
值：两个值：分别代表X轴 和 Y轴。
一个值：代表X轴，y轴默认为0。
/

transform: skew(0,30deg);

        /* X轴倾斜 */<br />

transform: skewX(30deg);

        /* Y轴倾斜 */<br />

transform: skewY(30deg);