3D-эффект карточек стандартных блоков Tilda
Два состояния карточки: объёмный наклон в покое и плавный переход при наведении.Подробнее о модеСвернуть описание
3D-эффект карточек стандартных блоков Tilda
Два состояния карточки: объёмный наклон в покое и плавный переход при наведении.Что умеет мод
- Задаёт поворот карточки по трём осям в обычном состоянии.
- Настраивает другой поворот и вертикальный сдвиг при наведении.
- Позволяет выбрать глубину перспективы, длительность и плавность перехода.
- Применяет оформление на экранах шириной от 1200 px.
Как подключить
Выберите карточку
Найдите нужный блок в каталоге конструктора и выберите его карточку. Исходный селектор .t983__col — пример, поэтому замените его, если используете другой блок. Можно указать селектор вручную.
Настройте два состояния
Задайте углы по осям X, Y и Z отдельно для покоя и наведения. Подберите вертикальный сдвиг и перспективу. Начните с небольших значений, чтобы текст оставался читаемым.
Подберите переход
Укажите длительность и выберите плавность из пресетов либо настройте свою кривую. Проверьте движение в превью и оставьте вокруг карточек место для наклона.
Проверьте на странице
Вставьте код в T123 после нужного блока и опубликуйте страницу. Проверьте экран от 1200 px, ширину ниже этого порога и переходы по ссылкам карточки.
Что учитывать. Эффект переключается между двумя заданными состояниями и не отслеживает положение курсора внутри карточки. Перспектива применяется к контейнеру карточек; проверьте результат на реальном блоке, особенно при ручном селекторе.
Вопросы и ограничения
Наклон будет следовать за мышью?
Нет. Этот мод задаёт обычное состояние и состояние наведения. Для непрерывной реакции на движение курсора подходит «3D-наклон и переворот».
Почему на телефоне нет эффекта?
В итоговом коде установлен порог от 1200 px. На более узком экране эти правила не применяются.
Можно наклонить карточку сразу по нескольким осям?
Да. Для обоих состояний доступны оси X, Y и Z, а при наведении ещё и вертикальный сдвиг.
Можно добавить другой мод движения на ту же карточку?
Несколько модов могут одновременно менять transform и мешать друг другу. Выберите один основной эффект движения для выбранных карточек.
Доступ к конструктору
Это бесплатная модификация. Войдите в аккаунт, чтобы настроить её и получить код.
