使用 transform() 时背景发生变化答案

【问题标题】：Background changes while using transform()使用 transform() 时背景发生变化
【发布时间】：2017-08-17 10:38:10
【问题描述】：

我有这个测试设置。当我将鼠标悬停在“Block 1”上时，它应该会在保持完整性的同时进行转换。我看到的是背景颜色正在改变。似乎都是关于 .blocks:after 元素的背景。（如果我对此发表评论，则元素的背景在悬停时不会改变）。

那么，什么会导致问题呢？

来源 - https://jsfiddle.net/1k5e2090/6/

body {
  background: #d3d3d3;
}

.blocks {
  display: flex;
  position: relative;
  width: 150px;
  height: 55px;
  margin: 25px;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: 'Helvetica', sans-serif;
  font-size: 20px;
}

.blocks#block1 {
  background: #4BACC6;
  left: 500px;
  top: 200px;
}

.blocks#block2 {
  left: 500px;
  top: -50px;
  background: #9BBB59;
}

.blocks#block3 {
  left: 200px;
  top: -45px;
  background: #C0504D;
}

.blocks:after {
  position: absolute;
  content: '';
  background: #F2F2F2;
  top: -7px;
  left: -7px;
  right: -7px;
  bottom: -7px;
  z-index: -1;
}

.blocks#block1:after {
  box-shadow: 3.5px 5.5px 1px -1px rgba(75, 172, 198, 0.45);
}

.blocks#block2:after {
  box-shadow: 3.5px 5.5px 1px -1px rgba(155, 187, 89, 0.45);
}

.blocks#block3:after {
  box-shadow: 3.5px 5.5px 1px -1px rgba(192, 80, 77, 0.45);
}

.blocks#block1:hover {
  transition: 1s ease;
  transform: translate(-100px);
 }

【问题讨论】：

标签： html css css-transitions transform

【解决方案1】：

这是因为 .blocks 元素上的 :after 行为。 See this fiddle

 .blocks:hover:after { border: 6px solid #fff; background: transparent;  z-index: -2;  }

【讨论】：

这个实际上适用于原始的 :after （过于复杂的）边框，虽然感觉就像一个 hack。无论如何，非常感谢！
不客气！是的，我没有更改原始代码，但正如@Abhijeet 所说，它肯定比使用边框和框阴影更简单

【解决方案2】：

.blocks {
  border: 7px solid #f2f2f2;
}

我已经编辑了你的小提琴https://jsfiddle.net/1k5e2090/9/

您已将边框用作 :pseudo 元素，这是不必要的。它实际上是在制造问题

【讨论】：

确实，显然不需要 :after 边界。谢谢！
您可以标记最佳答案以供将来参考

【解决方案3】：

代替使用之前和之后在块上使用简单边框并给出框阴影，这是因为您在前后使用绝对位置，所以当块移动前后自动采用。希望它有效简单地在块周围使用边框并在您的问题解决之前和之后删除

【讨论】：

是的，我得出了同样的结论。谢谢！