webkit-transform: прыгает при наведении в конце

Mahol
На сайте с 20.11.2016
Offline
61
1587

Всем привет. Можете подсказать, почему изображение немного прыгает в конце увеличения при наведении?

Использую вот такой код:

.box40 {

margin:0 auto;

overflow:hidden;

width: 320px;

height: 105px;

}

.box40 img {

-moz-transition: all 1s ease-out;

-o-transition: all 1s ease-out;

-webkit-transition: all 1s ease-out;

transition: all 1s ease-out;

}

.box40 img:hover{

-webkit-transform: scale(1.05);

-moz-transform: scale(1.05);

-o-transform: scale(1.05);

transform: scale(1.05);

}

То есть, изображение слегка увеличивается, а потом весьма заметно дёргается вверх, а потом вниз, как-будто подпрыгивает. Как убрать это подпрыгивание?

I2
На сайте с 07.03.2015
Offline
38
#1

Что ты не прыгало, нужно обнулить 3d transform

получится так


.box40 {
margin:0 auto;
overflow:hidden;
width: 320px;
height: 105px;
}

.box40 img {
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
transform: translate3d(0, 0, 0); // обнуляем
}

.box40 img:hover{
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
Качественная верстка PSD макетов (/ru/forum/974524)
Mahol
На сайте с 20.11.2016
Offline
61
#2
indenger20:
Что ты не прыгало, нужно обнулить 3d transform
получится так

Не помогло.

YDoron
На сайте с 25.10.2005
Offline
154
#3

поправте цифру 1.05 на 1

настраиваю Linux сервера, правлю баги, пишу фичи под Wordpress и Laravel

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий