.item {
    width: 180px;
    height: 360px;
    margin: 0 auto;
    border-radius: 0%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
.info-wrap {
    width: 180px;
    height: 360px;
    border-radius: 0%;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
    -webkit-transition: all 2.4s ease-in-out;
    -moz-transition: all 2.4s ease-in-out;
    -o-transition: all 2.4s ease-in-out;
    -ms-transition: all 2.4s ease-in-out;
    transition: all 2.4s ease-in-out;
    top: 20px;
    left: 20px;
    background: #f9f9f9;
}
.info_left {
    position: absolute;
    width: 180px;
    height: 360px;
    border-radius: 0%;
    -webkit-transform-origin: 0% 40%;
    -moz-transform-origin: 0% 40%;
    -o-transform-origin: 0% 40%;
    -ms-transform-origin: 0% 40%;
    transform-origin: 0% 40%;
    -webkit-transition: all 2.4s ease-in-out;
    -moz-transition: all 2.4s ease-in-out;
    -o-transition: all 2.4s ease-in-out;
    -ms-transition: all 2.4s ease-in-out;
    transition: all 2.4s ease-in-out;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.info_right {
    position: absolute;
    width: 180px;
    height: 360px;
    border-radius: 0%;
    -webkit-transform-origin: 100% 40%;
    -moz-transform-origin: 100% 40%;
    -o-transform-origin: 100% 40%;
    -ms-transform-origin: 100% 40%;
    transform-origin: 100% 40%;
    -webkit-transition: all 2.4s ease-in-out;
    -moz-transition: all 2.4s ease-in-out;
    -o-transition: all 2.4s ease-in-out;
    -ms-transition: all 2.4s ease-in-out;
    transition: all 2.4s ease-in-out;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.info_left > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0%;
    background-position: center center;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
.info_right > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0%;
    background-position: center center;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.info_left .info-back {
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
    -moz-transform: rotate3d(0, 1, 0, 180deg);
    -o-transform: rotate3d(0, 1, 0, 180deg);
    -ms-transform: rotate3d(0, 1, 0, 180deg);
    transform: rotate3d(0, 1, 0, 180deg);
    background: #000;
}

.info_right .info-back {
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
    -moz-transform: rotate3d(0, 1, 0, 180deg);
    -o-transform: rotate3d(0, 1, 0, 180deg);
    -ms-transform: rotate3d(0, 1, 0, 180deg);
    transform: rotate3d(0, 1, 0, 180deg);
    background: #000;
}

.info-wrap-open_left {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 3px rgba(115, 114, 23, 0.8);
}

.info-wrap-open_right {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 3px rgba(115, 114, 23, 0.8);
}

.info-open_left {
    -webkit-transform: rotate3d(0, 1, 0, -150deg);
    -moz-transform: rotate3d(0, 1, 0, -150deg);
    -o-transform: rotate3d(0, 1, 0, -150deg);
    transform: rotate3d(0, 1, 0, -150deg);
    -ms-transform: rotateY(-150deg);
}
.info-open_right {
    -webkit-transform: rotate3d(0, 1, 0, 150deg);
    -moz-transform: rotate3d(0, 1, 0, 150deg);
    -o-transform: rotate3d(0, 1, 0, 150deg);
    transform: rotate3d(0, 1, 0, 150deg);
    -ms-transform: rotateY(150deg);
}