メインコンテンツへスキップ

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'}],
}
型必須
オブジェクトの配列: {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} または文字列No

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

非推奨

代わりに transform プロパティを使用してください。

Transform Origin​

transformOrigin プロパティは、ビューの変換の原点を設定します。変換の原点は、変換が適用される点です。デフォルトでは、変換の原点は center です。

使用例

値​

Transform origin は、px、percentage、およびキーワード top、left、right、bottom、center の値をサポートしています。

transformOrigin プロパティは、1、2、または 3 つの値を使用して指定できます。各値はオフセットを表します。

1 値構文:​

  • 値は、px、percentage、またはキーワード left、center、right、top、bottom のいずれかである必要があります。
js
{
  transformOrigin: '20px',
  transformOrigin: 'bottom',
}

2 値構文:​

  • 最初の値 (x-オフセット) は、px、percentage、またはキーワード left、center、right のいずれかである必要があります。
  • 2 番目の値 (y-オフセット) は、px、percentage、またはキーワード top、center、bottom のいずれかである必要があります。
js
{
  transformOrigin: '10px 2px',
  transformOrigin: 'left top',
  transformOrigin: 'top right',
}

3 値構文:​

  • 最初の 2 つの値は、2 値構文と同じです。
  • 3 番目の値 (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 に関するガイドを参照してください。