为什么 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中文网其他相关文章！