В данном уроке я расскажу, как создать карточку, которая будет переворачиваться при наведении, открывая обратную сторону.
Описание
Видеоинструкция по подключению
Старые видео
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
Первым делом я создал необходимые разрешения для отображения, т.к в автоскейле не представляется возможным создать такие карточки, из-за позиционирования. Я взял: 1900-max, 1440-1900, 1366-1440, 1200-1366, 960-1200, 640-960, 480-640, 320-480.
Шаг 1
Создаём две карточки, это будет лицевая сторона и задняя. В дальнейшем мы их объединим в единое целое. Всему содержимого лицевой стороны (всем элементам) присваиваем класс card-flip-content-face-1.
Шаг 2
Создаём содержимое второй карточки. Всему содержимому задней стороны присваиваем класс card-flip-content-back-1
Шаг 3
Создаём тех же размеров шейп, что и карточка. Это будет контейнер, который позволит объединить содержимое двух сторон в одно. Заливку убираем. Присваиваем класс card-flip-wrapper-main-1
Шаг 4
Объединяем карточки в группы и выравниваем по window-container по вверхней стороне с отступом слева в 100px (более подробно в видео). А вот шейп с классом card-flip-wrapper-main-1 куда хотите, ведь именно в него попадут обе стороны.
Шаг 5
Чтобы создать новую карточку, дублируем карточки и меняем порядковый номер. Пример: card-flip-wrapper-main-2, card-flip-content-face-2, card-flip-content-back-2
Шаг 6
<!--Двухсторонние 3d карточки
https://mt-webdesign.ru/flip-cards-->
<script>
$(document).ready(function () {
const cardNumbers = [1, 2, 3, 4]; //указать через запятую кол. карточек
const mediaQuery = window.matchMedia('(min-width: 480px)');
cardNumbers.forEach(num => {
$(`.img-card-${num}-main, .img-card-${num}-arrow`).addClass(`card-flip-content-face-${num}`);
$(`.img-card-${num}${num}-arrow`).addClass(`card-flip-content-back-${num}`);
setTimeout(() => {
$(`.card-flip-content-back-${num}`).wrapAll(`<div class="card-flip-wrapper-back-${num}"></div>`);
$(`.card-flip-content-face-${num}`).wrapAll(`<div class="card-flip-wrapper-face-${num}"></div>`);
$(`.card-flip-wrapper-back-${num}, .card-flip-wrapper-face-${num}`).appendTo(`.card-flip-wrapper-main-${num} .tn-atom`);
}, 0);
$(`.card-flip-wrapper-main-${num}`).removeClass(`card-flip-wrapper-main-active-${num}`);
const handler = function () {
$(this).toggleClass(`card-flip-wrapper-main-active-${num}`);
};
if (mediaQuery.matches) {
$(`.card-flip-wrapper-main-${num}`).hover(handler);
} else {
$(`.card-flip-wrapper-main-${num}`).on('click', handler);
}
});
});
</script>
<style>
.t396__elem[class*="card-flip-wrapper-main-"] {
cursor: pointer !important;
}
[class^="card-flip-wrapper-face-"], [class^="card-flip-wrapper-back-"] {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
/*box-shadow: 0 74px 98px rgb(0 0 0 / 0%), 0 40px 40px rgba(0,0,0,0.12);*/
/*border-radius: 30px;*/
transition: transform 1.2s cubic-bezier(.34,1.56,.64,1);
}
.t396__elem[class*="card-flip-content-face-"],
.t396__elem[class*="card-flip-content-back-"] {
zoom: 0 !important;
}
[class^="card-flip-wrapper-back-"] {
transform: perspective(1500px) rotateY(-180deg);
}
[class^="card-flip-wrapper-face-"] {
transform: perspective(1500px) rotateY(0deg);
}
[class*="card-flip-wrapper-main-active-"] [class^="card-flip-wrapper-face-"] {
transform: perspective(1500px) rotateY(180deg);
}
[class*="card-flip-wrapper-main-active-"] [class^="card-flip-wrapper-back-"] {
transform: perspective(1500px) rotateY(0deg);
}
</style>
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
