CSS属性：transform-origin

transform-origin属性用于指定转换变换的中心点。

语法

transform-origin: x-axis y-axis z-axis;

• x-axis: 定义 x 轴上的位置。可以使用像素，百分比或关键字。
• y-axis: 定义 y 轴上的位置。可以使用像素，百分比或关键字。
• z-axis: 定义 z 轴上的位置。仅使用于 3D 转换。

值

• length 可以使用像素值为x-axis和y-axis定义三维变换的中心点。

• percentage 可以使用相对于元素本身宽度或高度的百分比值为x-axis和y-axis定义三维变换的中心点。

• initial 将此属性重置为其默认值。

• inherit 从父元素继承此属性的值。

• keywords center | top | bottom | left | right

  当使用关键字时，元素将基于关键字指定的固定位置执行变换。

用法

#example {
  transform-origin: top left;
  transform: rotate(45deg);
}

在上面的示例中，元素按顺时针旋转45度，以左上角为基准点。

注意事项

• 该属性仅适用于CSS3和更高版本。
• 当使用3D转换时，必须定义z-axis值，否则该属性将不起作用。
• 要在单个声明中使用多个值，请使用空格分隔它们。