Translate は Transform-Origin を置き換えることができますか?

Translate を使用した Transform-Origin のシミュレーション: 秘密の解明

CSS の transform-origin プロパティは、変換の原点に対する比類のない制御を提供します。ただし、次の手順に従えば、純粋なtransform:translateを使用してその機能を巧妙に複製できます:

1.変換の反転:

元の試みとは異なり、正しい結果を得るには変換値を反転する必要があります。これは、translate が正の値を右または下に移動すると解釈するのに対し、transform-origin は左上隅から測定するためです。

2.変換原点の位置合わせ:

デフォルトの変換原点は要素の中心に設定されます。シミュレーションが適切に動作するには、変換テクニックを使用して変換している要素の変換原点を左上隅 (0, 0) に揃えます。

例:

次の改訂されたコードを考えてみましょう:

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

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

これらの原則に従うことで、次の動作を効果的にシミュレートできます。トランスフォームを使用してtransform-originを実行すると、微妙な変換を簡単にロック解除できるようになります。

以上がTranslate は Transform-Origin を置き換えることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。