2024-05-13 09:42 Эффекты и анимация

3D-вращение карточки из шейпа в Zero-block на Тильде

3D-вращение карточки из шейпа в Zero-block на Тильде.

Благодаря этому коду для «Тильды» можно удобно скрывать большие объемы информации для карточек услуг и других блоков. К примеру, на лицевой стороне мы указываем название и размещаем иллюстрацию услуги, а на обратной стороне подробно описываем саму услугу. Таким образом мы получаем эстетичный и аккуратный дизайн, необычный эффект на сайте, который привлекает внимание к блоку.

Инструкция:

1. Создаем zero-block

2. Создаем 2 элемента "шейп" и присваиваем им классы "replacement1", "replacement2"

3. Создаем карточки в Figma или любом другом редакторе.

4. Загружаем в шейпы векторные изображения нужных карточек

5. Создаем блок Т123 и вставляем код из примера

6. Обновляем страницу

<script>
    $(document).ready(function () {
        $('.replacement1,.replacement2').wrapAll("<div class='wrapCard'></div>");
    });
</script>
<style>
    .wrapCard{cursor:pointer;}
    .wrapCard .replacement1>*{backface-visibility:hidden;}
    .wrapCard .replacement1>*,.wrapCard .replacement2>*{transition:1s !important;}
    
    .wrapCard .replacement2>*{transform: rotateY(180deg)!important;pointer-events:none;backface-visibility:hidden;}
    .wrapCard:hover .replacement1>*{transform:rotateY(180deg)!important;}
    .wrapCard:hover .replacement2>*{transform:rotateY(360deg)!important;pointer-events:all;}
    .wrapCard:hover .replacement1{height:0!important;pointer-events:none;transition-delay:0.5s!important;}
</style>

Команда Cubeteam