3D флип-карта означает карту, которая имеет 360 градусов в 3D-форме и содержит некоторую информацию. На этой флип-карте программа может видеть вид карты сзади.
Как вы можете видеть на данном изображении на веб-странице. На лицевой стороне есть только одно изображение, а на обратной стороне карты есть текст и значки социальных сетей, а также небольшое изображение этого человека. Буквально обратная сторона этой карты выглядит как карточка профиля, не так ли? Собственно в этой программе [3D Flip Card on Hover]
Сначала видна только лицевая сторона этой карты, а затем мы наводим карту, она плавно переворачивается, и появляется обратная сторона карты, а лицевая сторона скрывается.
Пример 3D Flip Card
Сначала мы можем видеть только лицевую сторону этой карты, а обратная сторона скрыта, когда мы наводим курсор, карта переворачивается, и ее задняя сторона видна, а лицевая сторона скрывается. Вы заметили, что когда мы наводим курсор на значки социальных сетей, их цвет и фон меняются, и появляется круглая рамка, которая выглядит действительно потрясающе? Я сделал эту флип-карту, используя только HTML и CSS.
Если вы знакомы с HTML и CSS, вы можете легко сделать эту флип-карту, а если у вас есть знания о JavaScript, вы можете добавить больше функций по своему желанию. Те друзья, которые испытывают трудности с созданием этой программы "Flip Card", не волнуйтесь, я предоставил все исходные коды ниже. Вы можете вставить данные коды в свои файлы. Это бесплатно для вас, вы можете использовать эту программу для своих целей.
3D Flip Card при наведении курсора [Исходные коды]
Прежде всего, вам нужно создать два файла, один из которых представляет собой файл HTML, а другой — файл CSS. После создания этих двух файлов вы можете скопировать и вставить данные файлы в свои файлы HTML и CSS. Вы также можете загрузить все файлы исходного кода этой программы прямо с данной «Кнопки загрузки».
HTML-код:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<div class="wrapper">
<div class="card front-face">
<img src="https://images.unsplash.com/photo-1492288991661-058aa541ff43?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Flip Card">
</div>
<div class="card back-face">
<img src="https://images.unsplash.com/photo-1492288991661-058aa541ff43?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Flip Card">
<div class="info">
<div class="title">CodingLab</div>
<p>User interface designer and <br>front-end developer</p>
</div>
<ul>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</ul>
</div>
</div>
КОД CSS:
.wrapper{
height: 400px;
width: 320px;
position: relative;
transform-style: preserve-3d;
perspective: 1000px;
}
.wrapper .card{
position: absolute;
height: 100%;
width: 100%;
padding: 5px;
background: #fff;
border-radius: 10px;
transform: translateY(0deg);
backface-visibility: hidden;
transform-style: preserve-3d;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
transition: transform 0.7s cubic-bezier(0.4,0.2,0.2,1);
}
.wrapper:hover > .front-face{
transform: rotateY(-180deg);
}
.wrapper .card img{
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 10px;
}
.wrapper .back-face{
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
transform: rotateY(180deg);
}
.wrapper:hover > .back-face{
transform: rotateY(0deg);
}
.wrapper .back-face img{
height: 150px;
width: 150px;
padding: 5px;
border-radius: 50%;
background: linear-gradient(375deg, #1cc7d0, #2ede98);
}
.wrapper .back-face .info{
text-align: center;
}
.back-face .info .title{
font-size: 30px;
font-weight: 500;
}
.back-face ul{
display: flex;
}
.back-face ul a{
display: block;
height: 40px;
width: 40px;
color: #fff;
text-align: center;
margin: 0 5px;
line-height: 38px;
border: 2px solid transparent;
border-radius: 50%;
background: linear-gradient(375deg, #1cc7d0, #2ede98);
transition: all 0.5s ease;
}
.back-face ul a:hover{
color: #1cc7d0;
border-color: #1cc7d0;
background: linear-gradient(375deg, transparent, transparent);
}