Demo:

Front Side
Back Side

CSS3 3D flip cards can be a really great UI widget when you are tight on space or you want to add a cool effect to your web app. I’ve used them in several projects to show the content on the front and additional information, settings or sharing options for the elements on the back. It feels really natural to have more options to the back of the elements.

I’ve used only HTML and CSS3 to create these.

1. HTML

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

.flip-container will be the div element holding the two sides of the flip card.
.front-side and .back-side respectively will be the two sides of the flip card. Both sides can hold any HTML content.

2. CSS

.flip-container {
    float: left;
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
    perspective: 1000px;
    -webkit-perspective: 1000px; 
}

.flip-container,
.flip-container .front-side,
.flip-container .back-side {
    width: 180px;
    height: 150px;
}

.flip-container .front-side,
.flip-container .back-side {
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: 1.2s;
    -webkit-transition: 1.2s;
    color: #fff;
    font-size: 48px;
    text-align: center;
    padding-top: 20px;
}

.flip-container .back-side {
    background-color: #333;
    z-index: 1;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.flip-container .front-side {
    background-color: #5d3696;
    z-index: 2;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

.flip-container:hover .front-side {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}

.flip-container:hover .back-side {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

We set the perspective of the parent, so that child transitions won’t look flat and 2d.
backface-visibility sets the visibility of the side of the element that’s not facing the user.

We apply the 3d transforms to the side elements, not the parent because of some IE issues.

And as a bonus here is a fix for older IE versions that won’t have 3d transitions but will switch the front and back faces of the cards.

<!--[if lte IE 9]>
<style>
.flip-container .back-side {display: none;}
.flip-container .front-side {display: block; background-color: #6991c7;}
.flip-container:hover .back-side {display: block;}
.flip-container:hover .front-side {display: none;}
</style>
<![endif]-->

3. JSFIDDLE DEMO

Ivan Kovachev
Follow me

Ivan Kovachev

Ivan Kovachev is Technical Team Lead and Senior Web Developer with over six years of professional experience in the field. Ivan also has an unhealthy interest in everything web related.
Ivan Kovachev
Follow me