翻訳だけで CSS Transform-Origin を完全に模倣できますか?

移動を使用した Transform-Origin のシミュレーション: スケーリングと回転の偏差の解決

CSS では、transform-origin プロパティを使用して要素の正確な位置決めが可能になります。特定の点を中心とした変形。ただし、transform:translate のみを使用してその機能を複製すると、特にスケール変換や回転変換と組み合わせる場合に課題が生じる可能性があります。

MDN ドキュメントによると、translate を使用したtransform-origin のシミュレーションには次のことが含まれます。

1. 指定された変換元の値を無効にし、それを初期変換として適用します。
2. 必要な値を適用します。
3. 変換された元の値によって要素を元に戻す。

このアプローチに従っているにもかかわらず、開発者が変換元の動作を模倣しようとすると、通常は誤った結果に遭遇します。これらの矛盾の背後にある理由は次のとおりです:

1.翻訳の反転:

提供された CSS コードには、.translate クラス内の翻訳の順序にエラーが含まれています。変換元を正しくシミュレートするには、最初と最後の変換を反転する必要があります。修正されたコードは次のとおりです:

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

2. Transform-Origin の調整:

別の問題は、.translate クラスのtransform-origin プロパティにあります。デフォルトでは、transform-origin は中央 (50% 50%) に設定されています。ただし、transform-origin の動作と一致させるには、この参照点を要素の左上隅 (0 0) に移動する必要があります。

.translate {
  transform-origin: 0 0;
  ...
}

これらの変更を組み込むことで、正確なシミュレーションを実現できます。変換を使用して変換元を変換します。これらの修正により、元の CSS コードで観察されたスケーリングと回転の不一致が解決されるはずです。

以上が翻訳だけで CSS Transform-Origin を完全に模倣できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。