Question

我在悬停时有一个带有这个CSS的DIV：

.card:hover {
  box-shadow: 5px 5px 20px #c4c4c4;
  margin-top: -5px;
  margin-left: -5px;
}

在这个div中，我有一个带有这个CSS的图像：

.card .avatar {
  border-radius: 100px;
  margin-top: -30px;
  margin-left: 10px;
}

问题是当转换发生时，图像似乎有点“抖动”。

这是小提琴：https://jsfiddle.net/zudvv4cv/2/

Answer 1

只需使用transform: translate(x,y)进行转换，忽略了周围元素的位置。

transform: translate(-5px, -5px);

Answer 2

使用transform属性而不是margin

int tot=2294;
JSONObject obj1 = new JSONObject();
obj1.put("total", tot );
FileWriter file1 = new FileWriter("/Users/ksameera/d3js_projects/flare3.json",false);
file1.write(obj1.toString());
file1.close();

确保您使用了所有正确的前缀

.card:hover {
  box-shadow: 5px 5px 20px #c4c4c4;
  transform:translate(-5px, -5px);
}

示例https://jsfiddle.net/zudvv4cv/4/

CSS div transition

2 个答案: