Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
@keyframes roll {
  from {
    transform: rotate(0deg);
  }
  25% {
    transform: rotateX(360deg) rotateY(360deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotateX(-360deg) rotateY(-360deg);
  }
  to {
    transform: rotate(0deg);
  }

}
.cube {
  width: 100px;
  margin: 0 auto;
  transform: rotateY(45deg) rotateX(245deg);
  xanimation: roll 10s linear infinite;
  transform-style: preserve-3d;
  transition: all 2s;
}
 .box-part {
  width: 100px;
  height: 100px;
  transform-origin: bottom;
  background-blend-mode: overlay;
  outline: 2px solid rgba(230, 0, 200, .7);
  transition: transform 2s;
}


.four {
  transform-origin: left;
  transform: translate(100px, -100px) rotateY(90deg);;
}
.four {
    background-image: linear-gradient(45deg, #000, #0ff), linear-gradient(135deg, #0f0, #00f);
}


.one {
  transform-origin: right;
  transform: translate(-100px, 200px) rotateY(-90deg);
}
.one {
  background-image: linear-gradient(45deg, #f00, #fff), linear-gradient(135deg, #ff0, #f0f);
}
 .two {
  transform: rotateX(90deg);
}

.other {
  transform-origin: top;
    transform-style: preserve-3d;
  transform: translateY(-100px) rotateX(-90deg);
}

 .last {
  transform-origin: top;
  transform: rotateX(-90deg);
}

/* color */

.three {
  background-image: linear-gradient(45deg, #f0f, #0ff), linear-gradient(135deg, #fff, #00f);
}

.two {
  background-image: linear-gradient(45deg, #ff0, #0ff), linear-gradient(135deg, #0f0, #fff);
}
.six {
  background-image: linear-gradient(45deg, #ff0, #000), linear-gradient(135deg, #f00, #0f0);
}

.five {
    background-image: linear-gradient(45deg, #00f, #f00), linear-gradient(135deg, #f0f, #000);
}
</style>
</head>
<body>
<div class="cube">
<div>
    <div class="box-part one">1</div>
    <div class="box-part two">2</div>
    <div class="box-part three">3</div>
    <div class="box-part four">4</div>
    <div class="other">
      <div class="box-part five">5</div>
      <div class="box-part last six">6           </div>
  </div>
</div>
</div>


<script id="jsbin-source-css" type="text/css">@keyframes roll {
  from {
    transform: rotate(0deg);
  }
  25% {
    transform: rotateX(360deg) rotateY(360deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotateX(-360deg) rotateY(-360deg);
  }
  to {
    transform: rotate(0deg);
  }

}
.cube {
  width: 100px;
  margin: 0 auto;
  transform: rotateY(45deg) rotateX(245deg);
  xanimation: roll 10s linear infinite;
  transform-style: preserve-3d;
  transition: all 2s;
}
 .box-part {
  width: 100px;
  height: 100px;
  transform-origin: bottom;
  background-blend-mode: overlay;
  outline: 2px solid rgba(230, 0, 200, .7);
  transition: transform 2s;
}


.four {
  transform-origin: left;
  transform: translate(100px, -100px) rotateY(90deg);;
}
.four {
    background-image: linear-gradient(45deg, #000, #0ff), linear-gradient(135deg, #0f0, #00f);
}


.one {
  transform-origin: right;
  transform: translate(-100px, 200px) rotateY(-90deg);
}
.one {
  background-image: linear-gradient(45deg, #f00, #fff), linear-gradient(135deg, #ff0, #f0f);
}
 .two {
  transform: rotateX(90deg);
}

.other {
  transform-origin: top;
    transform-style: preserve-3d;
  transform: translateY(-100px) rotateX(-90deg);
}

 .last {
  transform-origin: top;
  transform: rotateX(-90deg);
}

/* color */

.three {
  background-image: linear-gradient(45deg, #f0f, #0ff), linear-gradient(135deg, #fff, #00f);
}

.two {
  background-image: linear-gradient(45deg, #ff0, #0ff), linear-gradient(135deg, #0f0, #fff);
}
.six {
  background-image: linear-gradient(45deg, #ff0, #000), linear-gradient(135deg, #f00, #0f0);
}

.five {
    background-image: linear-gradient(45deg, #00f, #f00), linear-gradient(135deg, #f0f, #000);
}</script>
</body>
</html>