/* The fun begins */
.flip-picture {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    cursor: pointer;
    overflow: hidden;
    margin: 0 0 15px 0;
}

.flip-picture img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.flip-picture .front {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;

    /* Assign The 3D Transform */
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;

    /* Transition Effect */
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}

/* .flipping class for flip effect using jquery */

.flip-picture.flipping .front {
    z-index: 9;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}

.flip-picture .back {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 8;

    /* Assign The 3D Transform */
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateY(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;

    /* Transition Effect */
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}

.flip-picture.flipping .back {
    z-index: 10;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
}