transform-origin

用于指定元素变换原点的工具类。

快速参考

类	属性
origin-center	transform-origin: center;
origin-top	transform-origin: top;
origin-top-right	transform-origin: top right;
origin-right	transform-origin: right;
origin-bottom-right	transform-origin: bottom right;
origin-bottom	transform-origin: bottom;
origin-bottom-left	transform-origin: bottom left;
origin-left	transform-origin: left;
origin-top-left	transform-origin: top left;
origin-(<custom-property>)	transform-origin: var(<custom-property>);
origin-[<value>]	transform-origin: <value>;

示例

基础示例

使用 origin-top 和 origin-bottom-left 等工具类，设置元素的变换原点：

origin-center

origin-top-left

origin-bottom

<!-- [!code classes:origin-center,origin-top-left,origin-bottom] -->
<img class="origin-center rotate-45 ..." src="/img/mountains.jpg" />
<img class="origin-top-left rotate-12 ..." src="/img/mountains.jpg" />
<img class="origin-bottom -rotate-12 ..." src="/img/mountains.jpg" />

使用自定义值

使用 origin-[<value>] 等工具类，根据完全自定义的值设置变换原点：

<img class="origin-[33%_75%] ..." />

对于 CSS 变量，也可以使用 origin-(<custom-property>) 语法：

<img class="origin-(--my-transform-origin) ..." />

这只是 origin-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

使用 md: 等断点变体作为 transform-origin 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：

<img class="origin-center md:origin-top ..." />

了解如何使用变体，请参阅变体文档。