How to Create a Flip Animation in CSS (Step-by-Step Tutorial)

#webdev #css #animation #tutorial

Learn how to create a simple flip animation in CSS using HTML and step-by-step examples. This tutorial shows you how to build smooth card flip effects with just CSS. If you’re a senior or experienced developer looking for fancy animations, you’re welcome too! Let’s start creating cool stuff.

Step 1: HTML Structure

Having a clear and well-named structure makes styling easier later on. This is the basic structure needed for the animation to work—nothing extra.

<div id="container">
    <div id="flipper">
        <span id="front">front</span>
        <span id="back">back</span>
    </div>
</div>

Note for newbies: It’s preferable to use an id for unique elements. If you want to write with class selectors, that’s fine—but keep in mind classes are reusable and usually meant for multiple elements.

Reasons behind every element:

There should be a main element to hold everything, like #container here. It’s used to apply perspective to child elements.
The #flipper acts as a container for both sides and preserves 3D transformations of its children. This element will also act as the trigger for the animation.
#front and #back are necessary to provide visual differentiation between the two sides.

Step 2: Positioning and Properties

Let’s start with only the necessary styling for simplicity. The goal here is to make a two-dimensional element capable of moving in 3D.

#container {
    width: 200px;
    height: 200px;
    perspective: 500px;
}

#flipper {
    width: 100%; /* Occupy all the space */
    height: 100%;
    position: relative; /* Sides will be positioned relative to flipper */
    transition: transform 0.5s ease; /* Smooth animation */
    transform-style: preserve-3d;
}

#front,
#back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

Breakdown of styles used:

#container

Always set a width and height, otherwise you’ll be left wondering why the screen is blank.
The perspective property is essential for the animation. It applies a perspective transform to the children of the element. Negative values are invalid, and if the value is smaller than 1px, it’s clamped to 1px.

#flipper

The preserve-3d property ensures that the children are positioned in 3D space.
Without it, the elements can’t move in the third dimension, which means the #back side will never be visible.

Without preserve-3d property:

Note: Animation already applied here to show the potential mistakes.

#front and #back

Both sides should have the same size and share the same base styling.
The key property here is backface-visibility, which hides the opposite face when it’s turned away from the user.

At this stage, you’ll see overlapping text—don’t worry, that’s normal.

Note: You can use solid background colors to hide overlapping text, but backface-visibility must still be used to prevent mirrored text.

Step 3: Animation

Now comes the fun part! 🎉

#front {
    background-color: blue;
}

#back {
    background-color: red;
    transform: rotateY(180deg);
}

#flipper:hover {
    transform: rotateY(180deg);
}

Here, simple colors are used just for differentiation. The transform property rotates the elements.

As explained earlier, #flipper is used as the trigger. In this example, hovering over it will trigger the animation.

Note: Whichever side has the transform property applied will be hidden by default. Try swapping the transform between #front and #back to see the difference.

Here’s how it should turn out:

Full Code

Here’s the complete code in one place for easier reference:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flip Animation</title>
  <style>
    #container {
      width: 200px;
      height: 200px;
      perspective: 500px;
    }

    #flipper {
      width: 100%;
      height: 100%;
      position: relative;
      transition: transform 0.5s ease;
      transform-style: preserve-3d;
    }

    #front,
    #back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: white;
    }

    #front {
      background-color: blue;
    }

    #back {
      background-color: red;
      transform: rotateY(180deg);
    }

    #flipper:hover {
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="flipper">
      <span id="front">front</span>
      <span id="back">back</span>
    </div>
  </div>
</body>
</html>