変形した要素がホバーすると元に戻るのはなぜですか?

変換が元に戻るのはなぜですか?

CSS の領域では、とらえどころのない消滅する変換は不可解な現象となることがあります。ここでは、要素の変換が遷移時に元に戻って見えるという、この問題の具体的な例を詳しく掘り下げます。

問題: 要素の変換が元に戻る

次の CSS コード:

<code class="css">.blockquote {
  transition: all 250ms ease-in-out;
}

.blockquote:hover .blockquote2 {
  transform: translateX(-20px);
}

.blockquote:hover .author {
  transform: translateX(200px);
}</code>

blockquote 要素の上にマウスを置くと、効果が変わります。変換イベントは最初にトリガーされますが、変換された要素は最終的には元の位置に戻ります。

原因と解決策

この問題の核心は、 CSSプロパティ「表示」。 CSS 変換は通常、display: inline に設定された要素と互換性がありません。したがって、スナップの問題を解決するには、inline-block を表示するように表示設定を変更する必要があります。

以下は更新されたコードです:

<code class="css">.blockquote {
  display: inline-block;
  transition: all 250ms ease-in-out;
}

.blockquote:hover .blockquote2 {
  transform: translateX(-20px);
}

.blockquote:hover .author {
  transform: translateX(200px);
}</code>

この変更により、トランジションは次のようになります。期待どおりに機能し、要素はホバリング時に変換された位置を維持します。

以上が変形した要素がホバーすると元に戻るのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。