跳到主要內容

Transforms

Transforms 是樣式屬性，可協助您使用 2D 或 3D 變換修改組件的外觀和位置。但是，一旦您套用 transforms，版面配置在已變換的組件周圍保持不變，因此可能會與附近的組件重疊。您可以將 margin 套用至已變換的組件、附近的組件，或將 padding 套用至容器，以防止此類重疊。

範例​

參考文獻

Transform​

transform 接受變換物件的陣列或以空格分隔的字串值。每個物件都會指定要變換的屬性作為鍵，以及在變換中使用的值。物件不應合併。每個物件使用單個鍵/值對。

rotate 變換需要字串，以便變換可以用度 (deg) 或弧度 (rad) 表示。例如

js
{
  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
}

也可以使用以空格分隔的字串來實現相同的效果

js
{
  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
}

skew 變換需要字串，以便變換可以用度 (deg) 表示。例如

js
{
  transform: [{skewX: '45deg'}],
}
TypeRequired
物件陣列：{matrix: number[]}、{perspective: number}、{rotate: string}、{rotateX: string}、{rotateY: string}、{rotateZ: string}、{scale: number}、{scaleX: number}、{scaleY: number}、{translateX: number}、{translateY: number}、{skewX: string}、{skewY: string} 或字串否

decomposedMatrix, rotation, scaleX, scaleY, transformMatrix, translateX, translateY​

已棄用。 請改用 transform 屬性。

Transform Origin​

transformOrigin 屬性設定視圖變換的原點。變換原點是應用變換所圍繞的點。預設情況下，變換的原點是 center。

Example

Values​

Transform origin supports px, percentage and keywords top, left, right, bottom, center values.

transformOrigin 屬性可以使用一個、兩個或三個值來指定，其中每個值代表一個偏移量。

單值語法：​

  • 該值必須是 px、percentage 或關鍵字 left、center、right、top 和 bottom 之一。
js
{
  transformOrigin: '20px',
  transformOrigin: 'bottom',
}

雙值語法：​

  • 第一個值 (x 偏移量) 必須是 px、percentage 或關鍵字 left、center 和 right 之一。
  • 第二個值 (y 偏移量) 必須是 px、percentage 或關鍵字 top、center 和 bottom 之一。
js
{
  transformOrigin: '10px 2px',
  transformOrigin: 'left top',
  transformOrigin: 'top right',
}

三值語法：​

  • 前兩個值與雙值語法相同。
  • 第三個值 (z 偏移量) 必須是 px。它始終代表 Z 偏移量。
js
{
  transformOrigin: '2px 30% 10px',
  transformOrigin: 'right bottom 20px',
}

陣列語法​

transformOrigin 也支援陣列語法。它使 Animated API 更易於使用。它還可以避免字串剖析，因此效率更高。

js
{
  // Using numeric values
  transformOrigin: [10, 30, 40],
  // Mixing numeric and percentage values
  transformOrigin: [10, '20%', 0],
}

您可以參考 MDN 上關於 Transform origin 的指南以獲取更多資訊。