css之transform-origin

transform-origin 是 CSS 中的一个属性，它允许你改变一个元素变形的原点。默认情况下，变形的原点位于元素的中心点，即50% 50%（或 center center）。但是，通过使用 transform-origin 属性，你可以将变形的原点移动到元素上的任何位置。

语法

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

• x-axis 定义水平方向上的原点位置。
• y-axis 定义垂直方向上的原点位置。
• z-axis（可选）定义3D变形中Z轴的原点位置。

值

• 关键词：如 top, right, bottom, left, center。
• 百分比：如 50% 表示元素自身尺寸的50%处。
• 长度值：如 50px 表示距离元素左上角50像素的位置。

示例

1. 将变形原点设置为元素的左上角：

transform-origin: top left;

2. 将变形原点设置为元素的右下角，且Z轴位置为100px：

transform-origin: right bottom 100px;

3. 将变形原点设置为元素水平中心，垂直方向上距离顶部25%的位置：

transform-origin: center 25%;

使用场景

transform-origin 在进行CSS变形时非常有用，比如使用 rotate（旋转）、scale（缩放）等变形函数时，改变原点位置可以得到不同的变形效果。通过调整 transform-origin，你可以控制变形发生的具体位置，从而创造出更加丰富和动态的视觉效果。

总之，transform-origin 是一个强大的CSS属性，它允许你精确控制元素的变形原点，进而创造出更多样化的变形效果。