transform-origin

範例（Examples）

基本範例（Basic example）

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

使用自訂值（Using a custom value）

使用 origin-[<value>] 語法，根據完全自訂的值來設定 transform origin：

<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() 函式。

響應式設計（Responsive design）

在 transform-origin 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

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

在變體文件中了解更多關於使用變體的資訊。