transform 属性之 transform-origin

定义

transform-origin 属性用来设置 transform 变换的基点位置。默认情况下，基点位置为元素的中心点。

语法

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

名称	值	描述
x-axis	位置（left、center、right）/ 百分数 / 数值	x 轴基点坐标
y-axis	位置（top、center、bottom）/ 百分数 / 数值	y 轴基点坐标
z-axis	数值	z 轴基点坐标

注意：当用数值设置基点位置时，必须带单位！

位置

使用位置设置变换基点代码如下：

.transform-origin-position {
    transform: rotate(45deg);
    transform-origin: left top;
}

不同位置信息效果如下（标红圈处为变换基点）：

left-top

left-center

left-bottom

center-top

right-top

百分数

使用百分数设置变换基点代码如下：

.transform-origin-percent {
    animation: 9s rotate infinite;
    transform-origin: 25% 25%;
}

效果如下：

如上图，红圈处为元素变换基点。即代码中设置的 x 轴和 y 轴值25%。

数值

使用数值设置变换基点代码如下：

.transform-origin-number {
    transform: rotate(45deg);
    transform-origin: 100px 0;
}

注意此处数值后面必须带单位！

效果如下：

图中红圈处位置即为 x 轴 100px 的位置。