.imgBox {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 4px;
    color: #444444;
}

.imgBox {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s ease 0s;
}

.product {
    margin-bottom: 30px;
    perspective: 800px;
}

.product:hover .imgBox {
    transform: rotateY(180deg);

}

.productBody a {

    transform-style: preserve-3d;

}

.productBody a img {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
    transform-style: preserve-3d;

}


.change_front, .change_back {
    backface-visibility: hidden;
    background-color: #ffffff;

    left: 0;
    position: absolute;
    top: 0;
}

.back {
    transform: rotateY(180deg);
    z-index: 3;
}

.front {
    z-index: 2;
}