transform

--transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

（1）旋转rotate(n)

    旋转函数rotate(n)通过指定的角度参数使元素相对原点进行旋转；

    n为参数，用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋转；如果为负，逆时针旋转。

例：

（2）扭曲skew()

--元素倾斜显示，将对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。

3种使用情况：

    <1：skew(x，y)元素同时在水平方向和垂直方向扭曲；

    <2：skewX(x)元素仅在水平方向扭曲；

    <3：skewY(y)元素仅在垂直方向扭曲；

例：

（3）缩放scale()

 3 种使用情况：

  <1：scale(x,y) 使元素水平方向和垂直方向同时缩放；

<2：scaleX(x) 元素仅水平方向缩放；

  <3：scaleY(y) 元素仅垂直方向缩放；

注意：scale()的取值默认为 1，当值设置为 0.01 到 0.99 之间的任何值，作用使 一个元素缩小；而任何大于等于 1.01 的值，作用让元素放大。

例：

（4）位移 translate

——元素向指定的方向移动；

3 种情况：

<1：translate(x,y)水平方向和垂直方向同时移动；

<2：translateX(x)仅水平方向移动；

<3：translateY(y)仅垂直方向移动；

例：

（5）原点 transform-origin

——默认的元素的中心点居于元素 x 轴和 y 轴的 50%处；transform-origin 的作 用在于可以改变原点位置，是元素原点不在中心位置。