為什麼 CSS 變換會彈回內嵌元素的原始位置？

轉換翻譯回彈問題

使用CSS 對元素應用轉換時，可能會遇到元素回彈到原始狀態的問題轉換後的位置。在使用內聯元素時，這種行為尤其明顯。

原因：顯示值不正確

CSS 轉換不完全支援具有 display: inline 的元素。這可能會導致意外行為，包括回彈效果。

解決方案：變更顯示值

要解決此問題，請將顯示設定變更為 inline-block受影響的元素。這將允許正確應用轉換並防止回彈行為。

範例程式碼：

考慮以下程式碼片段，其中 .author 類別最初設定為顯示：內聯並遇到回彈問題。

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

透過將顯示屬性變更為內聯區塊，轉換現在將按預期運行，並且元素將在轉換後保持在所需位置：

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

以上是為什麼 CSS 變換會彈回內嵌元素的原始位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！