Question

我正在处理砖石类型的布局，在该布局中，我有一个带有column-count属性的容器，然后是带有圆角的项以容纳图像。我希望图像在悬停时提供一点transform: scale，但是使用css的这种组合，圆角边框会在过渡期间消失。

有什么办法解决吗？

.container {
  column-count: 2;
}

.item {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}

img {
  max-width: 100%;
  max-height: 100%;
  transition: all 0.2s;
}

img:hover {
  transform: scale(1.1);
}

<div class="container">

  <div class="item">
    <img src="https://images.unsplash.com/photo-1558834643-1dacaf774843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">
  </div>
</div>

Answer 1

默认情况下，transform不会在每个动画帧的父节点上触发重新绘制，这正是为什么它与opacity（具有相同的行为）一起被推荐为动画方法的原因。

但是对于您而言，您希望在每帧之后重绘一次。因此，您还需要对父级应用廉价的转换。

在您的情况下，一个简单的rotate(0)就足够了，但是请注意，在某些情况下您想保持3d引擎运行，在这种情况下，最好的选择是rotateZ(0)。

另外，要确保图像底部与其包装之间没有空间，可以将display:block应用于<img>：

.container {
  column-count: 2;
}

.item {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  transform: rotate(0);
}

img {
  max-width: 100%;
  max-height: 100%;
  transition: all 0.2s;
  display: block;
  min-width: 100%;
}

img:hover {
  transform: scale(1.1);
}

<div class="container">

  <div class="item">
    <img src="https://images.unsplash.com/photo-1558834643-1dacaf774843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">
  </div>
</div>

建议：由于这似乎与使用column-count没有直接关系，因此我建议将其从标题中删除，以增加其索引并帮助其他人，但存在相同的问题，但不使用column-count，发现起来更容易。

我要说的完全是在子项border-radius期间不应用父项transform。

在子项的缩放比例期间未应用CSS父项边界半径

1 个答案: