1. 变形 (Transforms)
  2. transform-origin

变形 (Transforms)

transform-origin

用于指定元素变形原点的实用工具。(Utilities for specifying the origin for an element's transformations.)

类名 (Class)样式 (Styles)
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>;

示例 (Examples)

基本示例 (Basic example)

使用类似 origin-toporigin-bottom-left 这样的工具类来设置元素的变形原点 (Use utilities like origin-top and origin-bottom-left to set an element's transform origin)

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" />

使用自定义值 (Using a custom value)

使用 origin-[<value>] 语法 (syntax) 来设置变形原点 (transform origin)基于完全自定义的值 (based on a completely custom value)

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

对于 CSS 变量,您也可以使用 (For CSS variables, you can also use the) origin-(<custom-property>) 语法 (syntax)

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

这只是 (This is just a shorthand for) origin-[var(<custom-property>)] 的简写,它会自动为您添加 var() 函数。(that adds the var() function for you automatically.)

响应式设计 (Responsive design)

前缀 (Prefix)a transform-origin 实用工具 (utility) 带有断点变体,如 md:,仅在以下情况下应用该实用工具 (with a breakpoint variant like md: to only apply the utility at)中等 (medium) 屏幕尺寸及以上 (screen sizes and above)

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

了解更多关于在变体文档中使用变体的信息。(Learn more about using variants in the variants documentation.)

版权所有 © 2025 Tailwind Labs Inc.·商标政策 (Trademark Policy)