Introduction
Ever feel like your website could use a little pizzazz? Like, ‘Hey, look at me—I’m interactive and stylish!’ Well, say hello to rotating cards in CSS! These little wonders can take your design from ‘meh’ to ‘whoa!’ faster than you can say ‘transform: rotateY(180deg).’
In this blog, I’ll show you how to create these magical flipping cards that’ll make your users go, ‘Wow, this developer knows their stuff!’ And don’t worry—no complicated wizardry is required, just some simple HTML and CSS. Let’s get flipping!"
Prerequisites
Basics of HTML5
Basics of CSS3
Let's code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Cards</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="card">
<div class="card__side card__side--front">
<h2 class="card__text">Front</h2>
</div>
<div class="card__side card__side--back">
<h2 class="card__text">Back</h2>
</div>
</div>
</body>
</html>
:root {
--gradient-front: linear-gradient(
to right bottom,
rgba(46, 204, 113, 1),
rgba(39, 174, 96, 1)
);
--gradient-back: linear-gradient(
to right bottom,
rgba(155, 89, 182, 1),
rgba(142, 68, 173, 1)
);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.card {
margin: auto;
margin-top: 20px;
height: 100%;
width: 300px;
perspective: 15000rem;
-moz-perspective: 150rem;
position: relative;
}
.card__side {
height: 300px;
width: inherit;
transition: all 5s ease-in-out; /* reduce time to make the transition go more faster*/
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
.card__side--front {
background: var(--gradient-front);
z-index: 1;
}
.card__side--back {
background: var(--gradient-back);
transform: rotateY(180deg);
z-index: -1;
}
.card:hover .card__side--front {
transform: rotateY(180deg);
z-index: -1;
}
.card:hover .card__side--back {
transform: rotateY(0);
z-index: 1;
}
.card__text {
color: white !important;
font-size: 40px;
text-align: center;
margin: 50px 0;
}