transform-origin

快速参考

示例

基本示例

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

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%] ..." src="/img/mountains.jpg" />

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

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

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

响应式设计

为 transform-origin 工具添加断点变体（如 md:）前缀，使其仅在中等及以上屏幕尺寸时应用：

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

在 变体文档 中了解更多关于使用变体的信息。