CSS 变形

什么是 CSS 变形

CSS transform属性指定您希望应用于 HTML 元素的转换效果。

语法如下：

html-element {
  transform: value;
}

CSS transform属性接受以下值：

• inherit：使用元素的父元素的值来转换元素transform。
• initial：使用其默认值转换 HTML 元素transform。
• matrix()：使用六个值的矩阵对元素进行二维变换。
• matrix3d()：使用由 16 个值组成的 4x4 矩阵对 HTML 元素进行三维变换。
• none：不对HTML 元素应用任何转换。
• perspective()：以透视视图转换 3D 变换元素。
• rotate()：通过二维旋转来变换元素。
• rotate3d()：通过三维旋转来变换元素。
• rotateX()：通过沿 X 轴进行三维旋转来变换元素。
• rotateY()：通过沿 Y 轴进行三维旋转来变换元素。
• rotateZ()：通过沿 Z 轴三维旋转来变换 HTML 元素。
• scale()：通过二维缩放来变换元素。
• scale3d()：通过三维缩放来变换元素。
• scaleX()：通过沿 X 轴缩放来变换元素。
• scaleY()：通过沿 Y 轴缩放来变换元素。
• scaleZ()：通过沿 Z 轴进行三维缩放来变换 HTML 元素。
• skew()：通过沿 X 轴和 Y 轴二维倾斜来变换元素。
• skewX()：通过沿 X 轴二维倾斜来变换元素。
• skewY()：通过沿 Y 轴二维倾斜来变换元素。
• translate()：通过二维平移（移动）来转换 HTML 元素。
• translate3d()：通过三维平移来变换元素。
• translateX()：通过沿 X 轴平移来变换元素。
• translateY()：通过沿 Y 轴平移来变换元素。
• translateZ()：通过沿 Z 轴三维平移来变换元素。

[!NOTE]
该transform属性接受一个或多个CSS 变换函数。例如，以下是有效的transform声明：

transform: rotate(20deg) scale(1.5);

在上述示例中，元素将先旋转 20 度，然后缩放 1.5 倍。

什么是 CSS rotate()函数？

rotate()通过围绕固定点二维旋转来变换元素。

CSS rotate()函数的语法

rotate()接受单个参数。语法如下：

element {
  transform: rotate(angle);
}

请注意以下几点：

• 该rotate(angle)函数相当于rotate3d(0, 0, 1, angle)或rotateZ(angle)。
• 该angle参数指定元素的旋转角度。
• angle可以是度、百分度、弧度或匝数。
• 参数angle由一个数字和后面要使用的单位组成，例如45deg。
• 您的浏览器的书写方向决定了元素的旋转方向。
• 正角度将使元素按从左到右的书写方向顺时针旋转。而负角度将使元素逆时针旋转。
• 在从右到左的书写环境中，正角度将使元素逆时针旋转。而负角度将使元素顺时针旋转。

rotate()函数示例

.rotate {
  transform: rotate(45deg);
}

3D 笛卡尔坐标系图示

具体参考：CSS rotateX()函数