Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>

Создайте Zero-блок и добавьте в него карточки, для которых будет применён эффект
Объедините элементы карточек в группы с типом Object и задайте каждой из них класс .uc-tilt

Если вы планируете использовать на странице несколько блоков с таким эффектом, задайте карточкам в каждом блоке разные классы, например, .uc-tilt1, .uc-tilt2 и т. д.
Задайте в настройках модификации класс карточек и параметры их анимации
Скопируйте код и вставьте его в блок T123 в конец страницы

Как это сделано?

<script>tilt.init(".uc-tilt", { glare: true, rotate: 5 })</script>

Настройки модификации

Класс карточек:

Блики при повороте:

Скорость поворота:

Макс. угол поворота:

Если включить, при повороте края карточек будут становиться светлее

Чем больше значение, тем сильнее вращается карточка

<!--tilt.js Эффект 3D-поворота карточек. https://postnikovmd.com/mods/tilt-->
<script>tilt.init(".uc-tilt")</script>

Скопировать код

Чат для дизайнеров

Вместе всё получится

3 000+ человек

Присоединяйтесь ко мне в Telegram-канале!

Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку

t.me/postnikovmds

Можете меня поблагодарить

Если у вас есть желание поблагодарить автора за работу, можете отправить любую сумму на развитие проекта

Присоединяйтесь ко мне в Telegram-канале!

Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку

t.me/postnikovmds

Столкнулись с ошибкой?

Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно

Хотите получить ответ по проблеме? Напишите напрямую на почту hello@postnikovmd.com или в Telegram

Хотите получить ответ по проблеме? Напишите напрямую на на почту или в Telegram

Расскажите подробнее о проблеме, при которой модификация работает неправильно

Сообщение отправлено

Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время

Нравятся модификации?

Поделитесь впечатлениями от работы с библиотекой — обратная связь поможет нам стать лучше

Поделитесь впечатлениями о сервисе — обратная связь поможет нам стать лучше

Сообщение отправлено

Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис