在 CSS 中添加转换后 div 元素行为异常

Question

这是我的文件。

TL;DR - 反复将鼠标悬停在两个 div 元素上以注意它们的行为。

body {
  margin: 10rem;
  margin-top: 5rem;
}

h1 {
  text-align: center;
}

div {
  position: absolute;
  padding: 2rem;
  width: 50px;
  height: 50px;
  font-size: larger;
  background-color: aqua;
}

div#fun {
  top: 18rem;
  transform: perspective(200px) translateZ(50px) rotateZ(30deg) skew(-20deg, -5deg);
  transition-property: all;
  transition-duration: 3s;
}

div#fun:hover {
  transform: unset;
}

div#move {
  transition: right 2s;
}

div#move:hover {
  right: 10rem;
}

<h1>Trying to be creative</h1>
<div id="move">Move</div>
<br> <br>
<div id="fun">Fun?!</div>

当您将鼠标悬停在 id 为 move 的 div 上时，它有时会快速改变其位置，但有时不会。我不知道这种行为背后的原因。 将鼠标悬停在第二个 div fun 上时，它的行为几乎正常，如 transform 属性中所述。但是在反复悬停在它上面之后，它的大小变得非常大，以至于它看起来像是弹出屏幕。

对不起，如果我有点直言不讳，但我已尽力解释我的问题。我对 CSS 很陌生。欢迎和高度赞赏任何善意的建议和帮助

Answer 1

当您使用 CSS transition 时，#move div 需要 right 属性的初始值才能转换。

div#move {
  right: 0;
  transition: right 2s;
}

div#move:hover {
  right: 10rem;
}