В данной статье, речь пойдет о том, как сделать 3D карточку на чистом CSS. Это может пригодиться вам как при создании Landing Page, так и при создании интернет-магазина.
Чтобы реализовать 3D карточку, нам для начала нужно написать html.
Выглядит это примерно так:
|
1 2 3 4 5 6 |
<div class="wrap"> <!--Обертка для карточки--> <div class="cart"> <!--Сама карточка --> <div class="front"><img src="img/iphone4.jpg" ></div> <!--Фронтальная сторона карточки--> <div class="back"><img src="img/iphone4.jpg"></div> <!--Обратная сторона карточки--> </div> </div> |
Ну и сам CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/*Стили для обертки*/ .wrap{ position:absolute; width:100%; height:100%; left:0; top:0; display:flex; /*Это сделано чтобы карточка была розмещена по центру*/ justify-content:center; /*Это сделано чтобы карточка была розмещена по центру*/ align-items:center; /*Это сделано чтобы карточка была розмещена по центру*/ } /*Оформляем саму карточку*/ .cart { width:250px; height: 475px; position:relative; perspective: 1000px; /*Добавляем эффект 3D*/ } .front, .back{ position:absolute; width:100%; height:100%; left:0; top:0; display:flex; justify-content:center; align-items:center; transition:1s; backface-visibility: hidden; /*Отключаем тыльную сторону у .front и .back*/ } .back{ transform:rotateY(180deg); /*Разворачиваем на 180 градусов по горизонтальной оси*/ } .cart:hover .front{ transform:rotateY(180deg); } .cart:hover .back{ transform:rotateY(360deg); } |
Если у вас есть вопросы, оставляете их в комментариях и я обязательно на них отвечу 🙂
А также чтобы не пропустить выхода новых статей подписывайтесь на наш telegram-канал и соц.сети
Автор публикации
Комментарии: 479Публикации: 210Регистрация: 30-07-2017
Оставьте ответ