/* reset CSS */
* { margin: 0; padding: 0; }
ul { list-style: none; }
a { text-decoration: none; }

.flip3D {
    width: 240px;
    height: 200px;
    margin: 10px;
    float: left;
}

.flip3D>.front {
    width: 240px;
    height: 200px;
    background: #FC0;
    border-radius: 7px;
    position: absolute;
    transform: perspective(600px) rotateY(0deg);
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
}

.flip3D>.back {
    width: 240px;
    height: 200px;
    background: #80BFFF;
    border-radius: 7px;
    position: absolute;
    transform: perspective(600px) rotateY(180deg);
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
}

.flip3D:hover>.front {
    transform: perspective(600px) rotateY(-180deg);
}

.flip3D:hover>.back {
    transform: perspective(600px) rotateY(0deg);
}