پیشنمایش زنده
کد HTML
<div class="card">
<div class="card__content">
<p class="card__title">Card Title</p>
<p class="card__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco.
</p>
</div>
</div>
کد CSS
.card {
position: relative;
width: 220px;
height: 300px;
background-color: white;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
perspective: 1000px;
box-shadow: 0 0 0 5px #ffffff80;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card svg {
width: 48px;
fill: #333;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
}
.card__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
background-color: #f2f2f2;
transform: rotateX(-90deg);
transform-origin: bottom;
}
.card:hover .card__content {
transform: rotateX(0deg);
}
.card__title {
margin: 0;
font-size: 24px;
color: #333;
font-weight: 700;
}
.card:hover svg {
scale: 0;
}
.card__description {
margin: 10px 0 0;
font-size: 14px;
color: black;
line-height: 1.4;
}