CSS transform 属性用于对元素应用 2D 或 3D 转换。它允许您平移、旋转、缩放、倾斜元素。
语法：
transform: <transform-function> [<transform-function>]...;
最常用的转换函数：
- 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);
CSS transform-origin 属性定义了变换的原点，即变换相对于其应用的元素的位置。它可以指定沿 x 轴和 y 轴的偏移量，或一个关键字。
语法：
transform-origin: <x-axis-position> <y-axis-position>;
值：
<x-axis-position>：指定沿 x 轴的偏移量。可以是长度值（例如 “50px”）或百分比值（例如 “50%”）。<y-axis-position>：指定沿 y 轴的偏移量。可以是长度值（例如 “50px”）或百分比值（例如 “50%”）。
关键字：
top：原点位于元素的顶部。bottom：原点位于元素的底部。left：原点位于元素的左边。right：原点位于元素的右边。center：原点位于元素的中心。
默认值：
50% 50%（元素的中心）
示例：
以下示例将元素的变换原点设置为其右上角：
element {
transform-origin: right top;
}
应用：
transform-origin 属性用于控制元素变换的行为。例如，它可以用来：
- 创建围绕特定点旋转的动画。
- 将元素放置在相对于其父元素的特定位置。
- 创建复杂的三维效果。
注意：
- 转换函数可以组合使用，以创建更复杂的转换。
- 转换的顺序很重要，因为它们将按顺序应用。
transform-origin属性仅适用于具有transform属性的元素。- 对于使用
translate()变换的元素，transform-origin属性定义了平移的原点。对于scale()和rotate()变换，它定义了变换的中心点。