@Drovosek01

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

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

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

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

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

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

Вот как это происходит: sendvid.com/uysgaoja
  • Вопрос задан
  • 279 просмотров
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack Куратор тега CSS
Thinking about a11y
Сделайте контектер с большими отступами. И поворачивайте карточку когда курсор находит на контейнер а не на саму карточку.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы