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

Transforms

Transforms は、2D または 3D 変換を使用してコンポーネントの外観と位置を変更するのに役立つスタイルプロパティです。ただし、変換を適用してもレイアウトは変換されたコンポーネントの周囲で同じままであるため、近くのコンポーネントと重なる可能性があります。このような重なりを防ぐために、変換されたコンポーネント、近くのコンポーネントにマージンを適用するか、コンテナにパディングを適用することができます。

使用例​

リファレンス

Transform​

transform は、変換オブジェクトの配列またはスペース区切りの文字列値を受け入れます。各オブジェクトは、変換されるプロパティをキーとして、変換に使用する値を指定します。オブジェクトを結合してはいけません。オブジェクトごとに単一のキー/値のペアを使用してください。

回転変換では、変換を度 (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} または stringいいえ

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

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

Transform Origin​

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

使用例

値​

変換原点は、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 ガイドを参照してください。