.pic-front, .pic-back {
  position: absolute;
  width: 307px;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 5px;
  transition: 0.9s;
  backface-visibility: hidden;
  overflow: hidden;
  background-repeat:no-repeat;
  background-position:center center;
}
.pic-front:before, .pic-front:after, .pic-back:before, .pic-back:after {
  position: absolute;
}


.pic-front {
  width: 307px;
  height: 230px;
}
.pic-back {
  
  transform: rotatey(180deg);
}





.mgood_item_box:hover .pic-front {
  transform: rotatey(-180deg);
}
.mgood_item_box:hover .pic-back {
  transform: rotatey(0deg);
}