Card Flip

How to do a CSS3 card flip. Needs Firefox and IE compatibility code.

by kshep92

HTML

<div class="cardContainer">
            <div class="card">
                <div class="front">This is the front</div>
                <div class="back">This is the back</div>
            </div>
        </div>

<div class="cardContainer">
            <div class="card">
                <div class="front">This is the front</div>
                <div class="back">This is the back</div>
            </div>
        </div>

CSS

.card {
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 1000;
    width: 320px;
    height: 160px;
}

.cardContainer {
    margin-bottom: 5px;
}

/* CardContainer is used as the trigger because using the card div
caused some wonky results. It worked, but it was just a bit shabby */

.cardContainer:hover .front {
    -webkit-transform: rotateY(180deg);
    -webkit-transition: -webkit-transform 0.3s ease 0.2s;
}

.cardContainer:hover .back {
    -webkit-transform: rotateY(0deg);
    -webkit-transition: -webkit-transform 0.3s ease 0.2s;
}

.front, .back {
    position: absolute;
    top: 0;
    left: 0;
    background: #c3c3c3;
    -webkit-backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s ease-in-out 0.1s;
    width: 100%;
    height: 100%;
}

.front {
    -webkit-transform: rotateY(0deg);
}

.back {
    -webkit-transform: rotateY(-180deg);
    background: #b0b0b0;
}