CSS Transform Origin 属性

CSS Transform Origin 属性用于更改一个元素进行变形时的基准位置。

语法

该属性使用以下语法：

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

其中，x-axis、y-axis、z-axis 分别表示该元素在 x 轴、y 轴、z 轴上的基准位置。它们可以被设置为以下数值：

• px（像素）
• %（百分比）
• left、center、right（相对于元素的左侧、中心和右侧）
• top、center、bottom（相对于元素的顶部、中心和底部）
• length（长度值）
• initial、inherit

其中，z-axis 只适用于三维转换。如果省略 z 轴，则会自动设置为 0。

示例

以下是一个简单的示例，展示了如何使用 transform-origin 属性来调整变形的基准位置：

.box1 {
  transform: rotate(30deg);
  transform-origin: left top;
}

.box2 {
  transform: rotate(30deg);
  transform-origin: right bottom;
}

该示例中有两个元素，分别为 .box1 和 .box2。它们都进行了旋转变形，但它们的基准位置不同。

.box1 的基准位置为其左上角，而 .box2 的基准位置为其右下角。

注意事项

• transform-origin 只对 transform 属性有效。它不会影响其他 CSS 属性。
• 如果省略 y-axis，则其默认值为 center。如果省略 x-axis，则其默认值也为 center。
• 在进行变形时，元素的中心点始终是其旋转轴。transform-origin 只会影响元素在旋转轴上的偏移。
• 大多数浏览器都支持 transform-origin 属性，但有些浏览器可能需要使用特定的前缀来实现。