CSS 悬停时变换和框阴影

Question

我有使用 material UI 的卡片组件。卡片在悬停时会发生变化，卡片上也应该出现阴影。但是当我把box-shadow放在变形前的盒子上时，阴影出现了，变形后的卡片和阴影之间有白色space。我该如何解决这个问题？

const CardStyle = styled(Card)`
  background: red;
  transition: transform 50ms;
  &:hover {
    transform: scale(1.02) perspective(0px);
    box-shadow: ${({ theme }) => theme.shadows[4]};
  }
`;

其他方式相同的输出：

:hover {
  transform: scale(1.02) perspective(0px);
  box-shadow: 4px 4px 4px rgba(60, 60, 93, 0.33)
}

Answer 1

如果我理解你的意图是对的，请为你的 box-shadow 添加一个过渡。

div {
  height: 5rem;
  width: 5rem;
  margin: 3rem auto;
  border: green 5px dashed;
  background: red;
  transition: transform .5s, box-shadow 1s;
}

div:hover {
  transform: scale(1.02) perspective(0px);
  box-shadow: 0 10px 10px rgba(255,0,0,.7);
}

<div></div>

CSS 悬停时变换和框阴影

CSS transform and box-shadow on hover

css

material-ui

transform

card