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