#sam {
  position: absolute;
  left: 50%;
  top: 50%;
  perspective: 1500px;
}

.box-area {
  position: relative;
  transform-style: preserve-3d;
  animation-name: rotate;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  0% {
    transform: rotate3d(0, 0, 0, 0);
  }
  100% {
    transform: rotate3d(0, 1, 0, 360deg);
    ;
  }
}

.box {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid #262626;
  opacity: 0.7;
}

#box-front {
  transform: translateX(-100px) translateY(-100px) translateZ(100px);
  background:#0F3255;
}

#box-back {
  transform: translateX(-100px) translateY(-100px) translateZ(-100px);
  background: #0F3255;
}

#box-right {
  transform: translateY(-100px) rotateY(90deg);
  background:#0F3255;
}

#box-left {
  transform: translateY(-100px) translateX(-200px) rotateY(90deg);
  background: #0F3255;
}

#box-top {
  transform: translateX(-100px) translateY(-200px) rotateX(90deg);
  background:#0F3255;
}

#box-bottom {
  transform: translateX(-100px) rotateX(90deg);
  background: #0F3255;
   box-shadow:  0 0 40px 15px;
   
}

.box-area {
  transform: rotateX(90deg) rotateY(90deg);
}