3D-вращение карточки из шейпа в Zero-block на Тильде.
Благодаря этому коду для «Тильды» можно удобно скрывать большие объемы информации для карточек услуг и других блоков. К примеру, на лицевой стороне мы указываем название и размещаем иллюстрацию услуги, а на обратной стороне подробно описываем саму услугу. Таким образом мы получаем эстетичный и аккуратный дизайн, необычный эффект на сайте, который привлекает внимание к блоку.
Благодаря этому коду для «Тильды» можно удобно скрывать большие объемы информации для карточек услуг и других блоков. К примеру, на лицевой стороне мы указываем название и размещаем иллюстрацию услуги, а на обратной стороне подробно описываем саму услугу. Таким образом мы получаем эстетичный и аккуратный дизайн, необычный эффект на сайте, который привлекает внимание к блоку.
Инструкция:
1. Создаем zero-block
2. Создаем 2 элемента "шейп" и присваиваем им классы "replacement1", "replacement2"
3. Создаем карточки в Figma или любом другом редакторе.
4. Загружаем в шейпы векторные изображения нужных карточек
5. Создаем блок Т123 и вставляем код из примера
6. Обновляем страницу
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>