JyYgWB

index.html

<div class="contenedor">
  <div class="cubo">
    <div class="side frente"></div>
    <div class="side atras"></div>
    <div class="side abajo"></div>
    <div class="side arriba"></div>
    <div class="side derecha"></div>
    <div class="side izquierda"></div>
  </div>
</div>

jyygwb.markdown

JyYgWB

A Pen by Jeison on CodePen.

License.

style.css

@keyframes rotacion {
  30% {
    transform: rotateX(0) rotateY(270deg) rotateZ(0deg);
  }
  
  60% {
    transform: rotateX(180deg) rotateY(270deg) rotateZ(0deg);
  }
  
  90% {
    transform: rotateZ(180deg) rotateX(180deg) rotateY(270deg);
  }
}

.contenedor {
  background:#ccc;
  height: 300px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 400px;
  perspective-origin: top;
}

.cubo {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  animation: 5s rotacion;
}

.cubo:hover {
  transform: rotateY(360deg) rotateX(180deg) rotateZ(180deg);
}

.side {
  width: 100px;
  height: 100px;
  position: absolute;
  opacity: 0.5;
  
}

.izquierda {
  background: white;
  transform: translateX(-50px) rotateY(90deg);
  
}
.derecha {
  background: red;
  transform: translateX(50px) rotateY(90deg) ;
}

.arriba {
  background: blue;
  transform: rotateX(90deg) translateZ(50px);
}

.abajo {
  background: yellow;
  transform: rotateX(90deg) translateZ(-50px);
}

.atras {
  background: purple;
  transform: translateZ(-50px);
}

.frente {
  background: black;
  transform: translateZ(50px);
}