Loading...

Как сделать 3d-эффект для изображения при наведении в Tilda?

Модификация может сделать 3d-эффект для нескольких изображений и настроить угол поворота, наклона и скорость вращения изображения
Время настройки: 2 минуты
Генератор кода
Видео инструкция
Инструкция
1. Если вам нужно использовать несколько изображений на одной странице, пропишите уникальный класс для каждого изображения; ВАЖНО: В классах первый символ должен быть буква. Если укажите первой цифру, код не будет работать.

2. Вставляем галерею GL12 и загружаем в неё изображение, копируем ссылку и вставляем в генератор. Формат файла советуем использовать svg или png;

3. Настройте параметры эффекта (наклон, скорость, угол поворота);

4. Отключите эффект на экранах меньше 1200px. Настройте скругление углов;

5. По желанию, можете добавить второе изображение в центр картинки. Обязательно используйте png с прозрачным фоном;

6. Копируем код и вставляем у себя на сайте в зеро блок в элемент html. Размеры картинки будут соответствовать размеру html элемента;

ВАЖНО: На мобильных устройствах не работает эффект плавного поворота изображения!
Class элемента
Ссылка на фоновую картинку
Наклон, чем ниже значение тем сильнее и больше наклон (perspective)
Угол поворота, градусы (max)
Cкорость вращения карточки (speed)
Отключить эффект на экранах до 1200рх
Cкругление углов (без рх)
Ссылка для 3D
Открывать ссылку в новом окне?
Ссылка на картинку в центре
Alt аттрибут
Копировать код <!-- Как сделать 3d-эффект для изображения в Tilda? -->
    <!-- https://nolim.cc/3d-effect-image -->
    <a target="_blank" style="width: initial; height: 100%; display: block;" href="link"> <div class="water" data-tilt data-tilt-max="200" data-tilt-speed="10000" data-tilt-perspective="500"> 
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/130527/fish.png" class="fish" alt="goldfish">
</div> </a> <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script> <style> .tn-atom.tn-atom__html{height: inherit;} .my3dimage .tn-atom { height: inherit; display:block;} .water { max-width: 100%; height: 100%; position: relative; background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/130527/water.jpeg') no-repeat; background-size: cover; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; border-radius: 30px; margin: 0 auto; } .fish { max-width: 90%; height: auto; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) translateZ(50px); -moz-transform: translate(-50%, -50%) translateZ(50px); -ms-transform: translate(-50%, -50%) translateZ(50px); -o-transform: translate(-50%, -50%) translateZ(50px); transform: translate(-50%, -50%) translateZ(50px); } @media (max-width: 768px) { .fish { max-width: 60%; } } @media screen and (max-width: 1199px){ .water { pointer-events: none; } } </style>
Код доступен только тем, кто оплатил подписку
Подписка стоит 390р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda