Building the Flipping Card Animation in Plain CSS

#css #frontend #webdev #animation

Introduction

The flipping card animation can not only provide functionality and ease of use to any webpage, but can also make your site feel more refined, user-friendly and, most importantly, modern and trustworthy.

The animation is a perfect example of bringing real-world movement and functions to the web, and improving usability through that.

A few ideas for use cases for the flipping card animation include:

Flashcards, or anything that reveals something else — the flipping card animation is great for revealing any sort of hidden information, especially when that piece of hidden information is directly connected to an opposite piece of "public" information. A prime example of this is flashcards, for example word-definition flashcards on sites like Quizlet. A more literal example could be that of a playing card, with a typical back of the card, and a front side with its face, number and suit.
Sign-In and Sign-Up forms — the flipping card animation can be great for things that have two options. One great example of this is the sign-in and sign-up forms on a site. Normally, these are on two different pages, but one idea to consider could be to have both forms be on one page, with each form being on one single flipping card (one form on the back, the other on the front), and that card can be flipped with CSS if the user wants to sign-in or sign-up respectively.

Let's Write the CSS!

Luckily, with new, modern CSS properties and styles, we can build this animation and functionality pretty quickly, with very little code, yet make it look extremely professional and new.

If you would like, check out the finished CodePen.

First, we will write the basic HTML and CSS of the card. The card will have a container, which is what we will be flipping with CSS, and that container will have two children: a front side element and a back side element. Both children and the container are sized in the CSS with the exact same height and width, which is imperative for this to work. Apart from that, all the other styles below are just for the example and are completely changeable for your own circumstances.

<div class="card-container">
    <div class="front">Front Side</div>
    <div class="back">Back Side</div>
</div>

.card-container, .front, .back {
    width: 20rem;
    height: 20rem;
}
.card-container {
    margin: 5rem;
}
.front, .back {
    box-sizing: border-box;
    padding: 2rem;
    border-radius: 4px;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .25);

    font-family: BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 2rem;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}
/* front side bg is green gradient */ .front {
    background-image: linear-gradient(to right bottom, #2ecc71, #229955);
}
/* back side bg is orange gradient */ .back {
    background-image: linear-gradient(to right bottom, #f1c40f, #e67e22);
}

This gives us a result that is something like this, which is effectively everything but the actual flipping card animation:

Now that we have the basic styles, we will build the actual animation.

The first step is to position both sides as absolute at the top left of the container (which we will set as relative). We will also set the "backface visibility" to hidden, which means that users cannot see the back side of the flipping card when the front is showing. Then comes the key to the animation, which is the "transform: rotateY" property, in which we will transition into onboth sides. The back side will be initially rotated across the y-axis 180 degrees to the back, and will therefore be hidden by the backface visibility property. When we flip the card (on-hover in this case, but you can change this to something else of course), the back side will rotated 0 degrees to the front, and the front side will be rotated 180 degrees to the back. All of this is again transitioned into with CSS to make that really cool animation we're looking to build. You can of course change the transition time or timing function for your needs, but other styles should be kept the same to ensure the perfect animation functionality.

.card-container {
    position: relative;
}
.front, .back {
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    overflow: hidden;
    transition: transform .8s ease;
}
.back {
    transform: rotateY(180deg);
}
.card-container:hover .front {
    transform: rotateY(-180deg);
}
.card-container:hover .back {
    transform: rotateY(0deg);
}

With this, we are almost done, but there is one last thing we have to add to make everything look really smooth, and that is the CSS perspective property. The perspective property makes our transition look 3D. We add this property to the parent element, which in this case is the container. The value of the property does affect how it turns out, so feel free to play around with it!

.card-container {
    perspective: 75rem;
}

If you'd like, check out the finished CodePen.

Conclusion

Overall, the flipping card animation is a great add-on to any site. It adds a special modern feel to your pages, and has a variety of use cases. I recently saw it used today in a JavaScript memory game, and it is very prevalent on many modern sites today. The flipping card animation can really add a lot to any design.

Of course, it does have some limitations, particularly on mobile with hover effects and graphics, and of course some of these new CSS properties may not be supported on older browsers such as IE or less-used ones like the KaiOS Browser.

I hope you enjoyed this post, and all of the code written is CC0 Licensed, meaning you can use it without attribution of any kind.

Give this post a ❤️ if you liked it, and thanks for scrolling.

— Gabriel Romualdo, 26 November, 2019