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

トランスフォーム

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

例​

リファレンス

Transform​

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

回転変換では、変換を度（deg）またはラジアン（rad）で表現できるように文字列が必要です。例えば

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

スペース区切りの文字列を使用しても同じことができます

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

スキュー変換では、変換を度（deg）で表現できるように文字列が必要です。例えば

{
  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} または 文字列いいえ

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

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

トランスフォーム起点​

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

例

値​

変換起点は、px、パーセンテージ、およびキーワード top、left、right、bottom、center 値をサポートしています。

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

1値構文：​

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

2値構文：​

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

3値構文：​

  • 最初の2つの値は、2値構文の場合と同じです。
  • 3番目の値（zオフセット）は px である必要があります。常にZオフセットを表します。
{
  transformOrigin: '2px 30% 10px',
  transformOrigin: 'right bottom 20px',
}

配列構文​

transformOrigin は配列構文もサポートしています。Animated API での使用に便利です。また、文字列の解析を回避するため、より効率的です。

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

詳細については、MDN の 変換起点 に関するガイドを参照してください。