Simple Card Flip Animation

4 min readMar 15, 2021

Animations can spice up the most boring of websites (and on the flip side, take away from some really great ones if there’s too much spice). A simple animation that can translate to many different applications, and hopefully spice up your website (without adding too much spice) is the card flip.

There is more than one way to implement a card flip, with many YouTube tutorials to go along with them. Depending on the specific needs and details of what you’re flipping, your methods may vary — but this is a simple variation that worked great for me, but stripped down to not include all my weirdly chosen class names and unnecessary css attributes.

Since I had to code this to write about it, here’s the example repo with all the code, and a git hub pages site to test the code out for yourself.

The mechanics behind this method of implementation involve minimal javascript, but without familiarity, maximum confusion. Note — You could implement this in some ways without Javascript — however you will eventually find that this is more work than the javascript required. Let me just say this: If you wish to keep the card flipped, or have a card flip on a click action, JS is the way to go. All that you’re using the JS to do is to manipulate a class via a toggle.

Step one — build the skeleton:

You get a div, you get a div, you all get divs. I built an outer main-container that held all my cards first (not required), just how I did it, followed by another “container” div as a child. Each of those children then had their own child, “card” who in turn had two children, “front” and “back”. For my demonstration, I eventually added some more cards to the mix!

The first div container (not the main outer one) — is just a div that represents the perspective of a card. The door frame, the bones, etc.

The next div “card”, will be the canvas that the front and back are painted on.

The front and back divs are simply what you would like to have appear on the cards front or back.

Step two — build the skin:

This part is essentially what took me the longest to get right. My needs were very specific, as our yours, but this is a general layout of what to expect. Bear in mind, the main outer container is for stylistic purposes to contain all the cards that to be flipped.

.card_container {

The “.card_container” is the container that holds the card, (hence the naming), and will serve as the framework for the card.

}

.card {

Immediately below is the “.card” itself that is flipped. Notice, the transition and transform-styles are required, but the transition time is up to you. 1 second feels right in my opinion. Preserve-3d is what allows the card to appear to exist in our 3 dimensional world. It might not be immediately apparent in this example, but MDN has a great visual example using a cube.

}

.card div {

The next selector on this card, “.card div” is more specific to the display of its contents. All of the attributes are necessary for the flip visual to work. Without position the item will move when you try to flip it. With no backface-visibility attribute the item’s backface (normally invisible in 2d) will become visible.

}

.card .front {

Here we have the actual content of what will be displayed in front, without any fancy css besides a background color I chose at random.

}

.card .back {

Here we have the actual content of what will be displayed in back, in addition to a transform attribute that allows the card to rotate, and another random background color that I thought would be a nice contrast. Better than the usual red vs blue you’ll see else where. Very original.

}

.card.flipped {

.card.flipped selects the flipped class. Specifically, something with this class will be rotate. In this case, the card with that class, which is a great segue into the final piece — the brains behind the operation — the javascript.

}

Step three — braaaains:

In the index.js file (or whatever you chose to call it) there needs to be atleast two things when using vanilla javascript: the query selector and the event listener.

These lines of JS in combination will target all the cards, and add a listener so that when ‘clicked’ — the classList will be toggled to flipped. Sounds familiar right? The CSS will then kick in to do a 180 degree rotation on the y axis, resulting in the flip you set up!

/* .card:hover{

As a side note — if you wanted to do a simple flip action on “hover” instead of click, this could be done with the mouseover listener, or with the pure CSS route, “.card:hover”

}*/

And there you have it, a flipping card! Personally, I’m still new to css animations and learning this was fun. The project I learned to use these on had a bit more animation and a bit more in the cards. A quick google search will lead you to some great code-pens with similar animations. Shout out to all who shared their code before me. I’m excited to see where this will take me as I venture on to more front end work!