Create a CSS card flip effect on hover

In this tutorial we'll be looking at creating a card flipping transition using CSS transform, here's a preview of of the finished product:

View the demo

HTML

We'll start with the HTML markup for our flipping cards:

<div class="flip-container">
        <div class="flip-cards">
            <div class="front-card">
            <div class="reverse-card" id="card1">
        </div>
        <div class="flip-cards">
            <div class="front-card">
            <div class="reverse-card" id="card2">
        </div>
        <div class="flip-cards">
            <div class="front-card">
            <div class="reverse-card" id="card3">
    </div>
</div>

So to start with we have an outer container for all elements, then a container for each card set. The card sets comprise of a 'front' and 'reverse' card that will be used to create the illusion of two faces.

CSS

Get some perspective

To start with we're going to style the outer container. In order to create a convincing flip effect we'll be using 'perspective', which will define our 3D space.  The smaller the 'perspective' the deeper the perspective is. This is quite a tricky concept to understand so I'd recommend playing with the perspective value once you've completed the tutorial to see how it affects the appearance of the transitions. 

.flip-container
{
    position:relative;
    -webkit-perspective:1000;
    perspective:1000;
}

The card containers

Our card set containers define the transition that we want to use for the hover (1 second easing). Preserve-3D allows the children within the outer container to share the 3D space independently, without this all elements will appear flat. You can find an excellent example of how this concept works on webkit.org.

On the hover state we rotate by 180 degrees to completely turn the card over.

.flip-cards
{
    width:200px;
    height:291px;
    position:relative;
    float:left;    
    margin-left:5px;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}


.flip-cards:hover
{
    transform: rotateY( 180deg );
    -webkit-transform: rotateY(180deg);
}

Next we apply some styling to all the card faces. The only notable property here is the 'backface-visibility' which is set to 'hidden'. This means that when the card face is fully rotated (180 degrees) the element won't display, so that only the remaining card face is visible. 

.flip-cards div
{
    width:200px;
    height:291px;
    position:absolute;
    border-radius:15px;    
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

We now apply some styling to the back and front cards independently. For the front card, we apply the 'cover' image, and for the reverse card we make the loading state rotated at 180 degrees (thus starting hidden so only the cover is shown). 

.front-card
{
    z-index: 2;
    background-image: url('/images/blog/cover.png');
}

.reverse-card
{
    -webkit-transform: rotateY(180deg);
    transform: rotateY( 180deg );
}

Finally we give each individual reverse card it's unique reverse face:

#card1
{
    background-image: url('/images/blog/ace_of_spades.png');
}

#card2
{
    background-image: url('/images/blog/8_of_hearts.png');
}

#card3
{
    background-image: url('/images/blog/black_joker.png');
}

Mix it up

This tutorial has given an example of how a flip effect can be created using CSS transform in a 3d space by flipping images. The content of your cards can contain anything you want though, and you could also flip your cards vertically by changing to rotateX instead of rotateY.

See the whole flipping thing in the demo.

Sign Up

NEXT: Build an HTML5 responsive contact form

In this tutorial we'll be using the latest HTML5 form attributes with modern CSS responsive techniques to create a flexible, cross-platform contact form.

comments powered by Disqus
Sign Up

Popular Tags

350x250

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.