3D-эффект карточек в Tilda: наклон при наведении без слежения за мышью

Карточка может слегка наклониться и приподняться, когда на неё наводят мышь. Это помогает показать, с каким элементом сейчас работает посетитель, не меняя фотографии и текст.

Здесь разберём мод с двумя заданными положениями: до наведения и во время него. Положение указателя внутри карточки он не отслеживает. Эффект применяется на экранах от 1200 px, поэтому мобильную версию нужно оценивать в её обычном виде.

Откройте конструктор и найдите свой стандартный блок. Выберите в нём карточку. Если нужный элемент задаётся вручную, проверьте его селектор: исходное значение .t983__col служит примером, а не универсальным адресом для любых блоков.

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

Для обоих состояний доступны повороты по осям X, Y и Z. При наведении можно добавить вертикальный сдвиг. Сначала оставьте карточку ровной в покое и задайте небольшой поворот только для активного состояния.

Проверьте, остаются ли читаемыми название и цена. Сильный наклон может быть уместен для декоративного изображения, но затруднять просмотр карточки с несколькими строками текста. Затем попробуйте другой исходный угол, если он нужен всей композиции. Не обязательно использовать все три оси одновременно.

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

Сравните центр ряда и крайние карточки. Посмотрите, не кажется ли крайний элемент чрезмерно вытянутым, не уходит ли фотография под соседнюю колонку. Оставьте вокруг карточек место для движения. Если родительский блок обрезает выступающие края, увеличение угла только подчеркнёт проблему. Сначала проверьте ограничения самого контейнера.

Выберите длительность и плавность перехода. Можно взять готовый вариант или настроить свою кривую. Проверяйте не только первое наведение: несколько раз переведите мышь между соседними карточками, затем быстро уведите её за пределы ряда.

Карточка должна возвращаться в понятное положение и не мешать нажать ссылку. Длинный, выразительный переход может хорошо смотреться в демонстрации, но ощущаться медленным в рабочем каталоге. Подбирайте скорость по тому, как человек просматривает ряд, а не по одному красивому кадру.

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

Откройте опубликованный адрес. Проверьте фотографию, подпись и переход по карточке. Отдельно сравните ширину 1200 px и размер чуть ниже: на узкой версии этот мод не применяет свои правила. Не пытайтесь исправить отсутствие эффекта на телефоне увеличением углов в конструкторе.

• Выбрана карточка нужного блока, а не оставлен пример селектора.
• Текст читается в обоих положениях.
• Края не обрезаются и не закрывают соседние ссылки.
• После ухода мыши карточка возвращается в исходное состояние.
• На ширине ниже 1200 px сохраняется аккуратная обычная сетка.

Если нужен наклон, который непрерывно следует за указателем, выберите соответствующий мод. Здесь полезнее получить два чётких, предсказуемых состояния, чем пытаться настроить поведение, которого у этого конструктора нет.

Читайте также: 3D-карточки в Tilda: наклон за курсором и переворот · Эффекты карточек в Tilda: как выбрать один из 13 вариантов GSAP.