Flip It Like a Pro: CSS3 Rotating Cards Made Easy

Frontend Marvels

UpdatedDecember 26, 2024

•2 min read

Flip It Like a Pro: CSS3 Rotating Cards Made Easy

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

#advance-css #html5 #css3 #frontend-development #developer #servicenow

Comments (1)

Join the discussion

Tech Simplified4mo ago

CSS transforms never get old! Ἲ8 These rotating cards are perfect for modern web interfaces.

I love how you"ve broken down the animation timing - that"s often where people struggle. The 3D perspective trick is what really makes these cards pop (literally).

From an accessibility standpoint, worth mentioning:

prefers-reduced-motion media queries for users who need less animation
Proper focus states for keyboard navigation
Screen reader friendly content structure

This kind of interactive UI element is great for productivity dashboards - imagine flip cards for different project statuses or tool previews. The visual feedback makes interfaces feel much more responsive and engaging.

Have you experimented with adding touch gestures for mobile? Swiping to flip cards could create really smooth mobile experiences. The CSS foundation you"ve laid out here would work perfectly with some JavaScript touch handlers.

Great tutorial! The step-by-step approach makes it easy to follow. ✨

Frontend Marvels

Part 1 of 4

Embark on a frontend adventure with me! 🚀 In this series, we’ll explore cool components that transform websites into interactive, engaging experiences. From sleek designs to fun effects, let’s make web development exciting and creative!

Up next