我有使用材料UI的卡片组件。卡在悬停状态下变换，卡上也会出现阴影。但是当我把盒子-阴影在变身之前的盒子上出现阴影，并且变身的卡片和阴影之间有空白。我该怎么解决这个？
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)
}
包括框影的转换（如果我正确理解您的意图）。
null
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>