有四种转换：rotate、scale、translate、skew

一. translate()

在x和y方向平移元素:

transform: translate(500px, 0px);

说明:

• 参数可以是像素或百分比。

• 参数1：沿x方向的平移，正表示向右移动

• 参数2：沿y方向的平移，正表示向下移动

• 如果是百分比是相对于自己的宽高的百分比。

• 不管是什么样的transform, 都是相对于在没有添加这个属性的时候的变换.

• 变换的时候有可能会覆盖住其他元素.

• 变换不对其他元素的布局造成任何的影响.

• 如果仅仅沿x或y某一个方向运动，也可以使用：

  • transform:translateX(200px);

  • transform:translateY(200px);

二. rotate()

旋转元素， 是指有沿着 z 轴旋转。(就是垂直于屏幕的轴）

transform:rotate(10deg);

参数必须是度数。大于0表示顺时针旋转的度数，小于0表示逆时针旋转的角度。

注意:

• 旋转的时候默认是以元素的几何中心作为轴来旋转的。
• 可以使用 transform-origin: offsetX offsetY;来设置旋转的时候的轴的位置.

  transform-origin: 0 0;
  

• 等价于rotateZ(10deg)

三. scale()

对元素进行缩放。

transform: scale(倍数);

注意:

• 倍数大于1表示放大，小于1表示缩小。不需要带单位
• 默认仍然是元素中心作为放大或缩小的参考点

四. skew()

skew是倾斜（斜切）。让元素与x方向或y方向产生倾斜。

transform: skew(40deg,10deg);

注意:

• 参数1：x方向的倾斜度数

• 参数2：y方向的倾斜度数