Как повернуть карточку?

Question

[dudaevfrontend]

.carCard{
    background-color: #efefef;
    width: 400px;
    padding: 0 0 5px;
    border-radius: 10px;
    transition: 0.3s;
    transform: rotateY(0deg);

}
.carCard:hover{
    transform: rotateY(360deg);
    background-color: seagreen;
    padding: 20px;
    border-radius: 20px
}

При использовании такого способа повернуть карточку, если навести мышкой на центр картинки, все ок, но если куда-нибудь в боковую часть, карточка начинает дергаться и продолжается это пока не навести на центр. Я понимаю причину. Когда я навожу на боковую часть карточки, срабатывает hover эффект, но когда она поворачивается, hover эффект пропадает, ведь карточка меняет свой размер, и она возвращается назад, потом hover опять срабатывает и так до бесконечности. Но как бы исправить это поведение?

Answer 1

[imko]

Добавь ей неподвижную обертку которая будет ловить наведение, а уже сама карточка крутиться будет. Соответственно пока мышка в пределах изначального контура карточки (неподвижной обертки) с карточки не слетит ховер