CSS - transform-origin 屬性

CSS 屬性 transform-origin 用於設定元素變換的原點。它是變換髮生的點。例如，旋轉的中心是 rotate() 函式的變換原點。

預設情況下，變換的原點是 center。

可能的值

CSS 屬性 transform-origin 可以具有以下值

x-offset：一個 <length> 或 <percentage> 值，用於定義 transform-origin 從盒子左側設定的距離。
offset-keyword：指定相應偏移值的關鍵字，即 left、right、top、bottom 或 center。
y-offset：一個 <length> 或 <percentage> 值，用於定義 transform-origin 從盒子頂部設定的距離。
x-offset-keyword：指定相應偏移值的關鍵字，即 left、right 或 center。它定義了 transform-origin 從盒子左側設定的距離。
y-offset-keyword：指定相應偏移值的關鍵字，即 top、bottom 或 center。它定義了 transform-origin 從盒子頂部設定的距離。
z-offset：一個 <length> 值，用於定義 z=0 原點從使用者眼睛設定的距離。<percentage> 值是不可接受的，因為這會使語句無效。

下表列出了關鍵字和百分比值的對映關係

關鍵字	百分比值
left	0%
center	50%
right	100%
top	0%
bottom	100%

應用於

所有可轉換的元素。

語法

transform-origin = x-axis y-axis z-axis;

這裡 x-axis、y-axis、z-axis 值分別表示變換原點的水平、垂直和深度位置。它們可以使用各種單位，例如畫素、百分比或關鍵字。

以下是語法可以寫出的各種方式

/* one-value syntax */
transform-origin = 20px;
transform-origin = 30%;
transform-origin = left;

/* x-offset-keyword / y-offset-keyword */
transform-origin = left top;

/* y-offset-keyword / x-offset-keyword */
transform-origin = bottom right;

/* x-offset-keyword / y-offset */
transform-origin = left 5px;

/* y-offset-keyword / x-offset-keyword */
transform-origin = bottom 10%;

/* x-offset / y-offset */
transform-origin = 3cm 5px | 25% 30%;

/* x-offset / y-offset / z-offset */
transform-origin = 3cm 5px -5px;

/* x-offset-keyword / y-offset-keyword / z-offset */
transform-origin = left top 3cm;

/* y-offset-keyword / x-offset-keyword / z-offset*/
transform-origin = bottom right 3cm;

CSS 屬性 transform-origin 可以使用以下三種方式之一指定，即使用 一個、兩個 或三個值，其中每個值表示一個偏移值。

1. 單值語法

值必須是 <length>、<percentage> 或以下關鍵字之一：left、center、right、top 和 bottom。
當指定單個值（作為 <length> 或 <percentage>）時，它確定水平偏移量 (x-axis)。

2. 雙值語法

一個值必須是 <length>、<percentage> 或以下關鍵字之一：left、center 和 right。
第二個值必須是 <length>、<percentage> 或以下關鍵字之一：top、center 和 bottom。
當指定兩個或多個值並且其中任何一個值為關鍵字 center 時，第一個值確定水平偏移量，第二個值確定垂直偏移量。

3. 三值語法

前兩個值與雙值語法的相同。
第三個值必須始終是 <length> 值，表示 Z 偏移量。

注意：對於所有 SVG 元素，transform-origin 的初始值為 0 0，但根 <svg> 元素和 <svg> 元素（作為外部 XML 名稱空間的直接後代）以及 transform-origin 為 50% 50% 的元素除外。

CSS transform-origin - 示例

以下示例演示了與變換函式一起使用的 transform-origin 的各種值的用法

<html>
<head>
<style>
   #div1 {
      position: relative;
      height: 50px;
      width: 50px;
      margin: 30px;
      padding: 20px;
      border: 1px dotted black;
   }

   .sec-div {
      width: 30px;
      height: 30px;
      padding: 20px;
      position: absolute;
      border: 1px solid black;
      background-color: lightblue;
   }

   #initial-val {
      transform: rotate(30deg);
      transform-origin: 50% 50%;
   }

   #ykey-xkey-z {
      transform: rotate(45deg);
      transform-origin: top left 3cm;
   }

   #xkey-y {
      transform: scale(1.2);
      transform-origin: right 20%;
   }

   #x-y {
      transform: translate(10px 30px);
      transform-origin: 30px 10px;
   }

   #x-yNeg-percent{
      transform: skewX(30deg);
      transform-origin: 80% -20%;
   }
</style>
</head>
<body>
   <h1>The transform-origin Property</h1>

   <div id="div1">
      <div class="sec-div" id="initial-val">50% 50%</div>
   </div>
   <p>transform: rotate(30deg);
      transform-origin: 50% 50%;</p>
   
   <div id="div1">
      <div class="sec-div" id="ykey-xkey-z">top left 3cm</div>
   </div>
   <p>transform: rotate(45deg);
      transform-origin: top left 3cm;</p>
   
   <div id="div1">
      <div class="sec-div" id="xkey-y">right 20%</div>
   </div>
   <p>transform: scale(1.2);
      transform-origin: right 20%;</p>
   
   <div id="div1">
      <div class="sec-div" id="x-y">30px 10px</div>
   </div>
   <p>transform: translate(10px 30px);
      transform-origin: 30px 10px;</p>
   
   <div id="div1">
      <div class="sec-div" id="x-yNeg-percent">100% -30%</div>
   </div>
   <p>transform: skewX(30deg);
      transform-origin: 80% -20%;</p>
</body>
</html>

列印頁面