.scene {
    width: 30px;
    height: 30px;
    perspective: 300px;
  }

  .cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: spin 15s infinite linear;
  }

  .cube div {
    position: absolute;
    width: 30px;
    height: 30px;
    background: url("../../assets/img/elpe.jpg") center/cover no-repeat;
    border: 1px solid #fff;
  }

  .front  { transform: rotateY(0deg) translateZ(15px); }
  .back   { transform: rotateY(180deg) translateZ(15px); }
  .right  { transform: rotateY(90deg) translateZ(15px); }
  .left   { transform: rotateY(-90deg) translateZ(15px); }
  .top    { transform: rotateX(90deg) translateZ(15px); }
  .bottom { transform: rotateX(-90deg) translateZ(15px); }

  @keyframes spin {
    from { transform: rotateX(0deg) rotateY(0deg); }
    to   { transform: rotateX(360deg) rotateY(360deg); }
  }