transform-origin 是 CSS 中用于设置变换原点的属性。它定义了元素变换的起始点,即围绕哪个点进行变换。这个属性通常与 transform 属性一起使用。

属性语法如下:
transform-origin: x-axis y-axis z-axis;

其中 x-axis、y-axis 和 z-axis 可以是具体的长度值(像素、百分比等),也可以是关键字(如 top、left、center 等)。具体取值方式如下:

  •  x-axis:定义 X 轴上的变换原点。

  •  y-axis:定义 Y 轴上的变换原点。

  •  z-axis:定义 Z 轴上的变换原点(在三维变换中使用,可选)。


例如,以下是一些使用 transform-origin 的例子:
/* 使用关键字 */
transform-origin: top right;

/* 使用具体的长度值 */
transform-origin: 50px 100px;

/* 使用百分比 */
transform-origin: 25% 75%;

/* 三维变换 */
transform-origin: 50% 50% 30px;

这些值的组合决定了变换的原点,元素将围绕这个点进行旋转、缩放等变换。


转载请注明出处:http://www.zyzy.cn/article/detail/6147/CSS