`transform-origin` 是一个 CSS 属性,用于定义元素进行变换时的原点位置。换句话说,当你对一个元素应用旋转、缩放等变换时,`transform-origin` 决定了变换应该围绕的点。
默认情况下,变换操作默认围绕元素的中心点进行。但你可以使用 `transform-origin` 属性改变这个默认行为。例如,你可以让元素围绕其左上角、底部中心或其他任何位置进行旋转或缩放。
语法如下:
```css
transform-origin:
transform-origin:
transform-origin: top; /* 可以是 top、bottom、left、right、center 等关键词 */
transform-origin: center center; /* 可以是水平方向和垂直方向的组合 */
```
这个属性常与 `transform` 属性一起使用,用于控制变换的原点位置。例如:
```css
div {
transform: rotate(45deg); /* 让元素旋转 45 度 */
transform-origin: right top; /* 让旋转操作围绕元素的右上角进行 */
}
```
使用 `transform-origin` 可以帮助你创建一些复杂的动画和变换效果,特别是在你需要控制元素如何旋转或缩放时。