CSS 转换translate() 方法 translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。下面的例子把 <div> 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素：

div {
  transform: translate(50px, 100px);
}

x, y 可为负数，表示向相反方向平移；也可以用百分比，表示按自身大小平移--未知宽高平移；

rotate() 方法根据给定的角度顺时针或逆时针旋转元素。下面的例子把 <div> 元素顺时针旋转 20 度：

div {
  transform: rotate(20deg);
}

使用负值将逆时针旋转元素。下面的例子把 <div> 元素逆时针旋转 20 度：

div {
  transform: rotate(-20deg);
}

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。下面的例子把 <div> 元素增大为其原始宽度的两倍和其原始高度的三倍：

div {
  transform: scale(2, 3);
}

下面的例子把 <div> 元素减小为其原始宽度和高度的一半：

div {
  transform: scale(0.5, 0.5);
}

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。下面的例子使 <div> 元素沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度：

div {
  transform: skew(20deg, 10deg);
}

如果未指定第二个参数，则值为零。因此，下例使 <div> 元素沿 X 轴倾斜 20 度：

div {
  transform: skew(20deg);
}

元素的中心点不变，skewX(x) x为正相当于水平向右推，角度越大，变形越厉害。skewY(y) y为正相当于垂直向下推，角度越大，变形越厉害。

matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。