* { box-sizing: border-box; transition: 0.3s; }

html, body { height: 100%; width: 100%; overflow: hidden; }

.scene { perspective: 800px;  display: flex;  align-items: center;
  justify-content: center;  height: 100%; width: 100%; 
  background-size: 100% 100%; background-position: center; background-repeat: no-repeat;  }
.scene:hover {  transform: scale(1.5);  }
.scene:hover .side {  opacity: 1;  }

.cube { transform-style: preserve-3d; position: relative; width: 300px; height: 300px; 
  -webkit-animation: rotate 10s ease-in-out infinite; animation: rotate 10s ease-in-out infinite; transform-origin: center center;  }

.side { position: absolute; width: 80%; height:80%; background-color: #ffffff; oopacity: 0.95; background-size: cover; background-repeat: no-repeat;  }

.back { transform: translateZ(-150px) rotateX(180deg); background-image: url(CUBO_IR1.jpg);  }

.left { transform: translateX(-150px) rotateY(90deg); background-image: url(CUBO_IR2.jpg); }

.right { transform: translateX(150px) rotateY(90deg);  background-image: url(CUBO_IR3.jpg); }

.top { transform: translateY(-150px) rotateX(90deg); background-image: url(CUBO_IR4.jpg); }

.bottom {  transform: translateY(150px) rotateX(270deg); background-image: url(CUBO_IR5.jpg); }

.front { transform: translateZ(150px); background-image: url(CUBO_IR6.jpg); }

@-webkit-keyframes rotate {
  0% { transform: rotateX(0); }
  12.5% { transform: rotateY(90deg); }
  25% { transform: rotateY(270deg); }
  37.5% { transform: rotateY(270deg);  }
  50% { transform: rotateY(360deg); }
  62.5% { transform: rotateX(90deg);  }
  75% { transform: rotateX(180deg); }
  87.5% { transform: rotateX(270deg); }
  100% { transform: rotateX(360deg); }
}

@keyframes rotate {
  0% { transform: rotateX(0);  }
  12.5% { transform: rotateY(90deg);  }
  25% { transform: rotateY(270deg); }
  37.5% { transform: rotateY(270deg);  }
  50% { transform: rotateY(360deg);  }
  62.5% {  transform: rotateX(90deg); }
  75% { transform: rotateX(180deg);  }
  87.5% { transform: rotateX(270deg); }
  100% { transform: rotateX(360deg); }
}