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;
}

Helpful Links

GitHub Repo

Flip It Like a Pro: CSS3 Rotating Cards Made Easy

Introduction

Prerequisites

Let's code

Helpful Links

Subscribe to my newsletter

Sandeep Rana

Sandeep Rana