This content originally appeared on DEV Community and was authored by DEV Community
Hello Folks đź‘‹
What's up friends, this is SnowBit here. I am a young passionate and self-taught frontend web developer and have an intention to become a successful developer.
Today, I am here with a cool CSS tutorial and you'll love it. Let's get started 🚀
- Create a card
<div class="card">
<div class="card-side front">
<div>Front Side</div>
</div>
<div class="card-side back">
<div>Back Side</div>
</div>
</div>
- It's time to style them
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,400&display=swap');
body{
font-family: "Poppins", sans-serif;
}
.card {
perspective: 150rem;
position: relative;
height: 40rem;
max-width: 400px;
margin: 2rem;
box-shadow: none;
background: none;
}
.card-side {
height: 35rem;
border-radius: 15px;
transition: all 0.8s ease;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 80%;
padding:2rem;
color: white
}
.card-side.back {
transform: rotateY(-180deg);
background-color: #4158D0;
background-image: linear-gradient(to right, rgb(236, 72, 153), rgb(239, 68, 68), rgb(234, 179, 8))
}
.card-side.front {
background-color: #0093E9;
background-image: linear-gradient(to right, rgb(134, 239, 172), rgb(59, 130, 246), rgb(147, 51, 234))
}
.card:hover .card-side.front {
transform: rotateY(180deg);
}
.card:hover .card-side.back {
transform: rotateY(0deg);
}
You made it 🌟
Check out the pen - https://codepen.io/codewithsnowbit/pen/BamqBLL
So, this was it for this article. I hope you learnt something new and enjoy reading. Stay tuned for the next article.
Let's connect on Twitter - @codewithsnowbit
🌏 Let's connect
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-02-27T14:22:32+00:00) Flipping Card in CSS. Retrieved from https://www.scien.cx/2022/02/27/flipping-card-in-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.