「translate」を使用してCSS「transform-origin」をシミュレートするにはどうすればよいですか?

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

Transform-Origin について

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

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

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

• transform-origin プロパティの否定された値によって要素を変換します。
• 必要な変換 (スケール、回転など) を適用します。
• 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) の代わりに translation(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 での要素操作とアニメーションのさまざまな創造的な可能性が開かれます。

以上が「translate」を使用してCSS「transform-origin」をシミュレートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。