iMasters Cube

by RaphaelDDL

HTML

<div id="container">
  <div id="imasters-cube">
    <div class="front"></div>
    <div class="back"></div>
    <div class="top"></div>
    <div class="right"></div>
    <div class="bottom"></div>
    <div class="left"></div>
  </div>
</div>

CSS

body {
    background:#f6f6f6;
    margin:10%;
}
#container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  -ms-perspective: 1000px;
  perspective: 1000px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
 }
#imasters-cube {
  position: relative;
  margin: 0 auto;
  height: 300px;
  width: 300px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: spinningH 6s infinite linear;
  -moz-animation: spinningH 6s infinite linear;
  -o-animation: spinningH 6s infinite linear;
  -ms-animation: spinningH 6s infinite linear;
  animation: spinningH 6s infinite linear;
}

#imasters-cube>div {
  position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    opacity: 0.95;
    background-image: linear-gradient(to bottom, white 2px, transparent 2px), linear-gradient(to right, transparent 2px, blue 2px);
    background-size:auto 100px;
    background-position: -1px -1px;
}

#imasters-cube .front {
  -webkit-transform: translateZ(150px);
  -moz-transform: translateZ(150px);
  -o-transform: translateZ(150px);
  -ms-transform: translateZ(150px);
  transform: translateZ(150px);
  background-color: #1e9ca8;
}
#imasters-cube .back {
  -webkit-transform: rotateY(90deg) translateZ(150px);
  -moz-transform: rotateY(90deg) translateZ(150px);
  -o-transform: rotateY(90deg) translateZ(150px);
  -ms-transform: rotateY(90deg) translateZ(150px);
  transform: rotateY(90deg) translateZ(150px);
  background-color: #058d9d;
}
#imasters-cube .top {
  -webkit-transform: rotateY(180deg) translateZ(150px);
  -moz-transform: rotateY(180deg) translateZ(150px);
  -o-transform: rotateY(180deg) translateZ(150px);
  -ms-transform: rotateY(180deg)...