Как сделать плавный эффект transform: scale?

Question

[RaulDuke]

Всем привет,

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

Есть картинка, при наведении на нее мыши она должна плавно увеличиваться и двигаться в зависимости от координат указателя. Я всю бошку себе разломал, но так и не придумал как это сделать. Самый простой вариант это конечно:

.portfolio-item {
    transition: all .3s ease;
}

$('.portfolio-item')
        .mousemove(function(e) {
            $(this).css({
                    'transform': 'matrix(1.1, 0, 0, 1.1, ' + (e.offsetX * -0.05) + ', ' + (e.offsetY * -0.05) + ')',
                });
        })

Но в этом случае эффект движение картинки происходит через анимацию transition, не очень отзывчиво получается, да и притормаживает. Если убираем transition то при наведении картинка резко увеличивается на 10%, а мне нужна плавность.

Вообщем, что я только не пробовал (не буду утомлять вас своими страданиями), но так и не нашел решения, простой, казалось бы, задачи.

Сразу скажу:
background-position для движения не предлагать,
background-size для увеличения не предлагать (на картинке cover и он таким и должен оставаться),
animate не работает с transform,
transform: translate на картинке + transform: scale на обертке для картинки не работает, точнее работает не так как хочется: при наведении мыши он сдвигает картинку образуется белая щель с соседним элементом и только потом начинает ее увеличивать - ацки не красиво.
и да, плагины не предлагайте, это уж совсем дно, тащить сторонние плагины в проект под такие задачи.

Comments

[litvin2]

transition: all .3s ease; работает прекрасно, если это не винда и хреновое железо.

[RaulDuke]

litvin2: слишком много условий, чтобы оно прекрасно работало)

Answer 1

[Михаил Чирский]

Очень крутая вещь, имеет много настроек, в свое время использовал
https://github.com/robbue/jquery.panr

Comments

[RaulDuke]

спасибо, но "и да, плагины не предлагайте, это уж совсем дно, тащить сторонние плагины в проект под такие задачи"

[Ivanq]

RaulDuke сказал(а):

и да, плагины не предлагайте, это уж совсем дно, тащить сторонние плагины в проект под такие задачи.

[Михаил Чирский]

RaulDuke: ну дело конечно ваше, только вот вы когда близко подойдете к теме анимаций, и т д, увидите что не все браузеры идеально работают, например попробуйте сделать простой transition для хрома, добавлять opacity к кнопке и чуток ее менять, вы будете удивлены, что весь контент будет дергатся вместе с этой кнопкой, и плагины уже решили это за вас, и повторюсь, выбор за вами

[RaulDuke]

Михаил Чирский: я с таким не сталкивался, но не плохой идеей было бы самому разобраться почему такое происходит. Просто насмотрелся на проекты в которых по 10-20 плагинов на каждый чих подключено, на мой взгляд этот подход ведет к избыточности.

[RaulDuke]

MaxKorz: аналогия про Австралию не корректна.

Послушайте, эта заковырка должна решатся 5-7 строчками кода, какой плагин, какие 50-120 строк? Мне кажется вы немного переоцениваете сложность задачи.

Answer 2

[litvin2]

Попробуй здесь посмотреть, как это реализовано: the7.dream-demo.com/demo/news при наведении на эту картинку:

Answer 3

[Михаил Паутов]

В общем друг у транситиона есть такие вещи как управления для той или иной анимации ну имееца виду можно настроить вначале чтобы увеличивалась потом двигалась если и это не то тогда извини )