时间戳

首页 > 解决方案 > 在 CSS 中添加转换后 div 元素行为异常

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

问题描述

这是我的文件。

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 很陌生。欢迎和高度赞赏任何形式的建议和帮助

标签： htmlcsstransformtransitionvisual-web-developer

解决方案

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

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

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

推荐阅读