body {
  background: #34495e;
}

.container {
  position: absolute;
  left: 0;
}

.morphProduct {
  width: 100%;
  max-width: 600px;
  margin: 0;
  transform-style: preserve-3d;
  transform-origin: left top;
  transform: rotateX(-60deg) rotateZ(-40deg) translateX(-239px) translateY(311px);
  transition: transform 0.6s;
}

.morphRight, .morphBottom {
  display: block;
  position: absolute;
  left: 0;
  background-image: url(https://unsplash.it/600/400?random);
  /* Firefox bug - 3D CSS transform, jagged edges */
  outline: 1px solid transparent;
}

.morphRight {
  top: -1px;
  width: 10px;
  height: 100%;
  background-size: auto 100%;
  transform-origin: left center;
  transform: translateZ(-1px) translateY(1px) rotateY(-90deg);
}

.morphBottom {
  bottom: 0;
  width: 100%;
  height: 12px;
  background-position: bottom center;
  background-size: 100% auto;
  transform-origin: center bottom;
  transform: translateZ(-4px) translateY(1px) translateX(-3px) rotateX(-90deg);
}

.morphProduct::before {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 28%;
  background: rgba(0,0,0,0.3);
  box-shadow: 0px 0px 29px 220px rgba(0, 0, 0, 0.5);
  transform: translateZ(0px) translateY(283px) translateX(149px);
}