ホバーしたときにも、この要素を画面の中央に配置しようとしています。
以下の例では、div をホバーしても中央に配置されません。50% の変換があり、上/左も変換されることがわかっています。これは、要素を中央に配置するために使用する一般的な方法です。
リーリー リーリー
P粉2116001742024-02-05 07:00:08
エラーは :hover セレクターにあります。変換に translate() がないためです。基本的に 0 にリセットしていますが、これは望んでいることではありません。
前回の内容を忘れて上書きしてしまうためです。
これは簡単な解決策です:
❌
リーリー✅
リーリー簡単な説明は次のとおりです:
最新のソリューション (コードが少ない):
CSS グリッドの使用 https://developer.mozilla.org/en-US/docs/Web/CSS/grid
使用 place-items 変換や位置を指定せずに自動的に中央に配置されます... https://developer.mozilla.org/en-US/docs/Web/CSS/place -アイテム
0.2 にスケールする必要はありません。scale(1) から始めて、より大きなスケールを指定するにはホバーして拡大します。たとえば 4。 (したがって、ホバーがなければ、200px から 0.2scale への移行の開始時にエラーは発生しません)
を使用することをお勧めします。
ただし、ユーザーは最新のブラウザを使用しているため、読みやすさとシンプルさを向上させるために、Flexbox または Grid を使用することをお勧めします。詳細については、
https://caniuse.com を使用してください (例: Grid は 2020 年以降、Chrome は 2017 年以降、すべてのブラウザで 95% サポートされています)
CSS グリッド ソリューションはこちらです
P粉7978557902024-02-05 00:44:14
変換の順序によって要素の表示方法が決まることに注意してください。まず要素 top: 50%; left: 50%; を移動し、右下の象限に配置します。次に、それを小さくしますtransform:scale(0.2) then次にそれを左に移動し、サイズを小さくしますtranslate(-50%, -50%)# 50%の ＃＃。
が小さくなる前に中央に配置されます。サイズを大きくする場合は、translate(-50%, -50%) も含めることに注意してください。後続の翻訳は、現在の翻訳に追加されるのではなく、 現在の翻訳を上書きします。
リーリー リーリー