
.Cover3D-container {
  position: relative;
  width: 243px;
  height: 445px;
  margin: 0 auto;
  overflow: visible;
  perspective: 690px;
  perspective-origin: 50% 50%;
  -webkit-filter: drop-shadow(10px 10px 7px rgba(0,0,0,.3));
}

.Cover3D {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(-14px);
  transition: all 2s ease-in-out;
  transform: rotateY( 40deg ) rotateX( 0deg );
}

.Cover3D:hover {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(-14px);
  transform: rotateY( 180deg ) rotateX( 0deg );
}

.Cover3D div.front, .Cover3D div.back, .Cover3D div.left {
  border-top: solid 5px #333;
  border-bottom: solid 5px #333;
}

.Cover3D div.front { border-right: solid 5px #333; }

.Cover3D div.back { border-left: solid 5px #333; }

.Cover3D div.front {
  width: 243px;
  height: 345px;
  background-position: 243px 0px;
  z-index: 10;
  transform: rotateY( 0deg ) translateZ( 14px );
}

.Cover3D div.back {
  width: 243px;
  height: 345px;
  background-position: 0px 0px;
  transform: rotateY( 180deg ) translateZ( 14px );
}

.Cover3D div.left {
  width: 28px;
  height: 345px;
  background-position: 265px 0px;
  transform: rotateY( -90deg ) translateZ( 14px );
}

.Cover3D div.right {
  width: 28px;
  height: 345px;
  transform: rotateY( 90deg ) translateZ( 230px );
  background-image: none;
  background-color: rgba(0,0,0,0.7);
}

.Cover3D div.top {
  width: 243px;
  height: 28px;
  transform: rotateX( 90deg ) translateZ( 14px );
  background-image: none;
  background-color: rgba(0,0,0,0.7);
}

.Cover3D-container .Cover3D div.bottom {
  width: 243px;
  height: 28px;
  transform: rotateX( -90deg ) translateZ( 331px );
  background-image: none;
  background-color: rgba(0,0,0,0.7);
}

.cover {
  display: table;
  width: 100%;
  height: 100%;
}

.cover-cell {
  display: table-cell;
  vertical-align: middle;
}

.cover-cell * { Cover3D-sizing: border-Cover3D; }

.Cover3D div {
  position: absolute;
  background-color: rgba(0,0,0,0.7);
  background-size: 500px 345px;
  backface-visibility: visible;
}
