Have you ever seen those card-flipping games where either clicking or hovering over them would display the underside of that card? I’m going to show you how to create that same card-flipping animation in CSS.
This tutorial will introduce you to the clip-path attribute while showing you how to use the transform attribute to flip in 3D.
What we will be creating
Below is the final animation we will be creating. I have given crass colours to each side so it is clear which side is being flipped.
Create the cards
Let’s create a list which we will turn into cards with styling and a few link points. For the HTML, below I will demo the raw HTML, but once I have explained everything, I will provide you with the Pug version so you can loop through as many iterations as you’d like.
I’ve only created three, you can create as many as you like, depending on your usage.
The next thing that we need to add is 4 anchor points so that we can detect the hover. The animation changes depending on which side you come in from, we need to be able to detect that. The way of doing this is to split the square hover space into triangles from each corner to the middle. We do this will the clip-path tool in CSS which will be shown further down this page.
Note: You do not need to use link tags for this, you could easily replace these with <span>.
Now we need to actually add in the Box that we will be flipping.
You must add all 4 links and the .box div to each list item. If you want to use pug to reduce the amount of code you write, then below will create all the code you need.
Creating the CSS
Firstly, let’s just get the defaults out of the way…
Style the list
Next, we need to style the list container. This involves using flex, removing the default padding and bullet styling. We also need to set the perspective for the animation, this will define how far away the card will appear to the user when animated. Play around with this attribute until you get the sort of animation you are after. Altering this can have a massive influence on the effect.
Using flex allows us to just keep on adding list items, safe in the knowledge that it’ll wrap and position each box in order, with enough spacing.
Styling the item
The style we add here is just setting the container for the card animation and isn’t the element that we’ll be flipping. We set the background to blue so you can see the animation occurring above. This is where we set the size and adjust the spacing.
Styling the hover points
Now we need to detect when the mouse hovers over the card. We could use the basic :hover pseudo-element to detect this, but we want to be able to trigger a different animation depending on which side the mouse comes in from.
To do this, we use the clip-path attribute I mentioned earlier. First, we need to add the overall position and z-index.
Now we need to add the clip-path for each entry point. The entry points are in this order: Top, Right, Bottom and Left.
Although this will provide us with the required effect, we need to make a minor adjustment once the hover state has been triggered. The reason for this is that as you move around the areas, a weird animation occurs as it triggers other clip-paths. In this instance, I want to prevent this.
Styling the box
Before we trigger any of the animations, we need to style the box. Even though we are using one div element, we are going to give it a front and back using pseudo-elements. This way, we are using the main div as a parent, and can just animate that while being able to add minor adjustments to each layer.
Notice that for the “font”, we use backface-visiblity is set to hidden so that we can set the alternate back using the before element.
Performing the animation
To get the hover state to actually trigger the animation of the box, we combine the anchors with a sibling using a tilde character. So we create an animation for each anchor point.
You’ll notice that the animation you see has reversed, and any text content you have placed on the backwards-facing card is now unreadable. To fix this, and get the final results, we add in the final transform on hover.
Summary
You should take this as your first step into 3D animations in CSS. There are far more complicated things you can do with this, but it gets you started and you can take it to the next level.