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 サイトの他の関連記事を参照してください。