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

CSS で Translate を使用した Transform-Origin のシミュレーション

CSS では、transform-origin プロパティは要素に変換を適用するための原点を定義します。このプロパティは、最初に独自の変換元プロパティの否定値によって要素を変換し、次に要素の変換を適用し、次にプロパティ値によって変換することによって適用されることに注意することが重要です。

transform:translateを使用したtransform-originの動作には、次の手順が必要です:

1. transform-originの値を無効にします: 適用する前にtransform-originの値を無効にする必要があります。それらを翻訳として。これは、変換変換が原点に負の値を適用し、実質的に原点を反転させるためです。
2. 要素の変換を適用します: 変換元の値を無効にした後、要素の変換は次のようになります。
3. 原点を移動します: 最後に、正の反転された変換原点の値を使用して原点を元の位置に移動します。この手順により、原点が意図した位置にリセットされます。

間違った例:

この例では、問題は誤った変換です。変換元の否定された値は正しく適用されますが、最終的な変換が失われます。次の修正されたコードは正確な結果を生成します:

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

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

修正例:

この修正された例には、原点を復元するために必要な最終変換ステップが含まれています。意図した位置に。その結果、ボックスは同じ変換された外観を示し、transform:translate を使用して、transform-origin を実際にシミュレートできることがわかります。

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