@Drovosek01

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

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

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

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

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

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

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

Дергаине происходит из-за того, что в процессе поворота курсор покидает зону карточки и браузер пытается восстановить её. От этого курсор снова попадает в зону. И так туда сюда. Потому нужно слушать события :hover на неизменяемых элементах.
Ответ написан
LenovoId
@LenovoId
I want, women not to get sick
https://codepen.io/topicstarter/pen/GeEBOa вроде бы если при наведении мышки указать через родителя..то ни чего не дёргается ...
Ответ написан
Ваш ответ на вопрос

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

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