Transforms
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-(<自定義屬性>) | transform-origin: var(<自定義屬性>); |
origin-[<值>] | 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-[<值>] 語法 來設定變換原點基於完全自定義的值
<img class="origin-[33%_75%] ..." src="/img/mountains.jpg" />對於 CSS 變數，您也可以使用 origin-(<自定義屬性>) 語法
<img class="origin-(--my-transform-origin) ..." src="/img/mountains.jpg" />這只是 origin-[var(<自定義屬性>)] 的簡寫，它會自動為您添加 var() 函數。
響應式設計
前綴一個 transform-origin 工具類別 使用像 md: 這樣的斷點變體，僅在中等螢幕尺寸及以上應用該工具類別medium 螢幕尺寸及以上
<img class="origin-center md:origin-top ..." src="/img/mountains.jpg" />在變體文檔中了解更多關於使用變體的信息。
