css transform 平移、旋转、缩放、倾斜元素

CSS transform 属性用于对元素应用 2D 或 3D 转换。它允许您平移、旋转、缩放、倾斜元素。

语法：

transform: <transform-function> [<transform-function>]...;
1

最常用的转换函数：

• translateX(x)：水平平移元素 x 个单位。
• translateY(y)：垂直平移元素 y 个单位。
• translate(x, y)：同时水平和垂直平移元素。
• rotate(angle)：围绕元素的中心旋转 angle 度（顺时针，负数为逆时针）。
• scaleX(scale)：沿 x 轴缩放元素 scale 倍。
• scaleY(scale)：沿 y 轴缩放元素 scale 倍。
• scale(scaleX, scaleY)：沿 x 轴和 y 轴同时缩放元素。
• skewX(angle)：沿 x 轴倾斜元素 angle 度。
• skewY(angle)：沿 y 轴倾斜元素 angle 度。

示例：

/* 平移元素 50px 向右和 100px 向下 */
transform: translate(50px, 100px);

/* 旋转元素 45 度 */
transform: rotate(45deg);

/* 沿 x 轴缩放元素 2 倍，沿 y 轴缩放元素 1.5 倍 */
transform: scale(2, 1.5);

/* 沿 x 轴倾斜元素 30 度 */
transform: skewX(30deg);
1
2
3
4
5
6
7
8
9
10
11

CSS transform-origin 属性定义了变换的原点，即变换相对于其应用的元素的位置。它可以指定沿 x 轴和 y 轴的偏移量，或一个关键字。

语法：

transform-origin: <x-axis-position> <y-axis-position>;
1

值：

• <x-axis-position>：指定沿 x 轴的偏移量。可以是长度值（例如 “50px”）或百分比值（例如 “50%”）。
• <y-axis-position>：指定沿 y 轴的偏移量。可以是长度值（例如 “50px”）或百分比值（例如 “50%”）。

关键字：

• top：原点位于元素的顶部。
• bottom：原点位于元素的底部。
• left：原点位于元素的左边。
• right：原点位于元素的右边。
• center：原点位于元素的中心。

默认值：

50% 50%（元素的中心）

示例：

以下示例将元素的变换原点设置为其右上角：

element {
  transform-origin: right top;
}
1
2
3

应用：

transform-origin 属性用于控制元素变换的行为。例如，它可以用来：

• 创建围绕特定点旋转的动画。
• 将元素放置在相对于其父元素的特定位置。
• 创建复杂的三维效果。

注意：

• 转换函数可以组合使用，以创建更复杂的转换。
• 转换的顺序很重要，因为它们将按顺序应用。
• transform-origin 属性仅适用于具有 transform 属性的元素。
• 对于使用 translate() 变换的元素，transform-origin 属性定义了平移的原点。对于 scale() 和 rotate() 变换，它定义了变换的中心点。