translate を使用したtransform-originのシミュレーション: 総合ガイド

Transform-Originについて

Transform-originプロパティは、要素がそれ自体を変形する中心となる点。このプロパティを設定すると、要素の回転、スケーリング、または傾斜をより正確に制御できるようになります。

Translate による Transform-Origin のシミュレーション

CSS の公式ドキュメント変換元は変換変換を使用してシミュレートできると述べています。プロセスは次のとおりです。

• transform-origin プロパティの否定された値によって要素を変換します。
• 必要な変換 (拡大縮小、回転など) を適用します。
• transform-origin プロパティの値によって要素を変換します。

トラブルシューティング間違った結果

変換を使用して変換起点をシミュレートしようとして失敗した場合は、次の 2 つの一般的なエラーのいずれかが発生した可能性があります:

エラー 1: 変換順序が正しくありません ]

変換元のシミュレーションには、最初の否定変換、目的の変換、および最後の肯定変換の 3 つの変換操作が含まれます。これらの翻訳を適切な順序で実行することが重要です。

例:

.translate {
  transform: translate(-100px, -100px) translate(100px, 0px) scale(2) rotate(45deg) translate(100px, 100px);
}

この例では、最初の翻訳は正しいですが、最初の翻訳を無効にして要素を元の状態に戻すには、最終的な翻訳はtranslate(-100px, -100px)ではなくtranslate(100px, 100px)にする必要があります。元の位置。

エラー 2: 不一致ですTransform-Origin

transform-origin を持つ元の要素と、translate でシミュレートされた要素の両方が同じ transform-origin を持つようにします。デフォルトの変換原点は要素の中心であり、どちらの場合も明示的に設定するか、デフォルトのままにすることが重要です。

例:

.translate {
  transform-origin: 0 0;
  transform: translate(-50px, -50px) rotate(45deg) scale(2) translate(50px, 50px);
}

ここでは、transform-origin が要素の左上隅に明示的に設定されており、元の要素のデフォルトの transform-origin と一致します。

結論

これらのエラーを修正し、適切な変換順序と変換起点を確保することで、変換変換を使用して変換起点を効果的にシミュレートできます。このテクニックは、CSS での要素の操作とアニメーションのさまざまな創造的な可能性を開きます。