Как исправить дерганье при повороте/трансформации блока?

Question

[Drovosek01]

https://codepen.io/Drovosek/pen/MxJmjJ

Изначально блок-карточка наклонена по 3м осям и при наведении курсора она становится в "нулевое" положение.

Если карточку возвращать в нулевое положение через
transform: rotate3d(0,0,0,0deg); то дерганья происходят несильные и только когда курсор останавливается на границе блока.

Если карточку возвращать в нулевое положение через
transform: rotate(0); то дерганье происходит очень раздражительное и не только, когда курсор находится на границе блока.

Почему так происходит и как можно исправить?

Вот как это происходит: sendvid.com/uysgaoja

Comments

[KononovD]

весь видос смотрел на количество вкладок в браузере и плакал))

Answer 1

[Alex]

Сделайте контектер с большими отступами. И поворачивайте карточку когда курсор находит на контейнер а не на саму карточку.

Дергаине происходит из-за того, что в процессе поворота курсор покидает зону карточки и браузер пытается восстановить её. От этого курсор снова попадает в зону. И так туда сюда. Потому нужно слушать события :hover на неизменяемых элементах.

Comments

[Drovosek01]

Это, наверное, хорошее решение, но звучит как костыль :/

Остается 2 вопроса:
1. Почему при использовании rotate3d() и просто rotate() происходят дерганья разной силы? При просто rotate(0) может быть дерганье, как-будто блок моментально в нулевую позицию повернулся.
2. Есть ли какой-то способ/псевдокласс в css применить заданные стили при "касании" блока, а не удержании курсора над ним?