.horizontal_flip_left .front {
    transform: rotateY(0deg);
}
.horizontal_flip_left .back {
    transform: rotateY(-180deg);
}
.horizontal_flip_left .flip_box:hover .back {
    transform: rotateY(0deg);
}
.horizontal_flip_left .flip_box:hover .front {
    transform: rotateY(180deg);
}
.horizontal_flip_right .front {
    transform: rotateY(0deg);
}
.horizontal_flip_right .back {
    transform: rotateY(180deg);
}
.horizontal_flip_right .flip_box:hover .back {
    transform: rotateY(0deg);
}
.horizontal_flip_right .flip_box:hover .front {
    transform: rotateY(-180deg);
}
.vertical_flip_bottom .flip_box:hover .back, .vertical_flip_top .flip_box:hover .back {
    transform: rotateX(0deg);
}
.vertical_flip_top .back {
    transform: rotateX(180deg);
}
.vertical_flip_top .front {
    transform: rotateX(0deg);
}
.vertical_flip_bottom .back, .vertical_flip_top .flip_box:hover .front {
    transform: rotateX(-180deg);
}
.vertical_flip_bottom .front {
    transform: rotateX(0deg);
}
.vertical_flip_bottom .flip_box:hover .front {
    transform: rotateX(180deg);
}
.flip_bottom .back, .flip_bottom .front, .flip_left .back, .flip_left .front, .flip_right .back, .flip_right .front, .flip_top .back, .flip_top .front {
    transition: all 1s ease 0s;
}
.flip_bottom .back, .flip_left .back, .flip_right .back, .flip_top .back {
    opacity: 0.5;
}
.flip_bottom .flip_box:hover .front, .flip_left .flip_box:hover .front, .flip_right .flip_box:hover .front, .flip_top .flip_box:hover .front {
    z-index: -9;
}
.flip_bottom .flip_box:hover .back, .flip_left .flip_box:hover .back, .flip_right .flip_box:hover .back, .flip_top .flip_box:hover .back {
    opacity: 1;
    z-index: 1;
}
.flip_left .back {
    backface-visibility: visible;
    transform: rotateY(-270deg);
    transform-origin: 0 50% 0;
}
.flip_left .flip_box:hover .back {
    transform: rotateY(0deg);
}
.flip_right .back {
    backface-visibility: visible;
    transform: rotateY(270deg);
    transform-origin: 100% 50% 0;
}
.flip_right .flip_box:hover .back {
    transform: rotateY(0deg);
}
.flip_top .back {
    backface-visibility: visible;
    transform: rotateX(270deg);
    transform-origin: 0 0 0;
}
.flip_top .flip_box:hover .back {
    transform: rotateX(0deg);
}
.flip_bottom .back {
    backface-visibility: visible;
    transform: rotateX(-270deg);
    transform-origin: 0 100% 0;
}
.flip_bottom .flip_box:hover .back {
    transform: rotateX(0deg);
}