My card component using material UI has a hover effect with a transforming animation, as well as a shadow that should appear on the card. However, I am facing an issue where the box-shadow appears on the box before the transformation, creating white space between the transformed card and the shadow. How can this be resolved?
const CardStyle = styled(Card)`
background: red;
transition: transform 50ms;
&:hover {
transform: scale(1.02) perspective(0px);
box-shadow: ${({ theme }) => theme.shadows[4]};
}
`;
Another way to achieve the same output:
:hover {
transform: scale(1.02) perspective(0px);
box-shadow: 4px 4px 4px rgba(60, 60, 93, 0.33)
}