.stage {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #008080;
  -webkit-perspective: 1000px;
          perspective: 1000px; }

.stage .cube {
  width: 200px;
  height: 200px;
  margin: 200px auto;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: cube-rotate 10s linear infinite;
          animation: cube-rotate 10s linear infinite; }

.stage .cube .side {
  position: absolute;
  width: 200px;
  height: 200px;
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, transparent 3px, transparent 20px), repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, transparent 3px, transparent 20px); }

.stage .cube .side.left {
  -webkit-transform: translateX(-100px) rotateY(90deg);
          transform: translateX(-100px) rotateY(90deg); }

.stage .cube .side.right {
  -webkit-transform: translateX(100px) rotateY(90deg);
          transform: translateX(100px) rotateY(90deg); }

.stage .cube .side.top {
  -webkit-transform: translateY(-100px) rotateX(90deg);
          transform: translateY(-100px) rotateX(90deg); }

.stage .cube .side.bottom {
  -webkit-transform: translateY(100px) rotateX(90deg);
          transform: translateY(100px) rotateX(90deg); }

.stage .cube .side.back {
  -webkit-transform: translateZ(-100px);
          transform: translateZ(-100px); }

.stage .cube .side.front {
  -webkit-transform: translateZ(100px);
          transform: translateZ(100px); }

@-webkit-keyframes cube-rotate {
  20% {
    -webkit-transform: rotate3d(1, 1, 1, 360deg);
            transform: rotate3d(1, 1, 1, 360deg); }
  20.001% {
    -webkit-transform: rotate3d(0, 0, 0, 360deg);
            transform: rotate3d(0, 0, 0, 360deg); }
  40% {
    -webkit-transform: rotate3d(1, -1, -0.5, 360deg);
            transform: rotate3d(1, -1, -0.5, 360deg); }
  40.001% {
    -webkit-transform: rotate3d(0, 0, 0, 360deg);
            transform: rotate3d(0, 0, 0, 360deg); }
  60% {
    -webkit-transform: rotate3d(-0.8, -0.2, 1, 360deg);
            transform: rotate3d(-0.8, -0.2, 1, 360deg); }
  60.001% {
    -webkit-transform: rotate3d(0, 0, 0, 360deg);
            transform: rotate3d(0, 0, 0, 360deg); }
  80% {
    -webkit-transform: rotate3d(0.3, 1, -0.6, 360deg);
            transform: rotate3d(0.3, 1, -0.6, 360deg); }
  80.001% {
    -webkit-transform: rotate3d(0, 0, 0, 360deg);
            transform: rotate3d(0, 0, 0, 360deg); }
  100% {
    -webkit-transform: rotate3d(-0.5, 1, -0.8, 360deg);
            transform: rotate3d(-0.5, 1, -0.8, 360deg); } }

@keyframes cube-rotate {
  20% {
    -webkit-transform: rotate3d(1, 1, 1, 360deg);
            transform: rotate3d(1, 1, 1, 360deg); }
  20.001% {
    -webkit-transform: rotate3d(0, 0, 0, 360deg);
            transform: rotate3d(0, 0, 0, 360deg); }
  40% {
    -webkit-transform: rotate3d(1, -1, -0.5, 360deg);
            transform: rotate3d(1, -1, -0.5, 360deg); }
  40.001% {
    -webkit-transform: rotate3d(0, 0, 0, 360deg);
            transform: rotate3d(0, 0, 0, 360deg); }
  60% {
    -webkit-transform: rotate3d(-0.8, -0.2, 1, 360deg);
            transform: rotate3d(-0.8, -0.2, 1, 360deg); }
  60.001% {
    -webkit-transform: rotate3d(0, 0, 0, 360deg);
            transform: rotate3d(0, 0, 0, 360deg); }
  80% {
    -webkit-transform: rotate3d(0.3, 1, -0.6, 360deg);
            transform: rotate3d(0.3, 1, -0.6, 360deg); }
  80.001% {
    -webkit-transform: rotate3d(0, 0, 0, 360deg);
            transform: rotate3d(0, 0, 0, 360deg); }
  100% {
    -webkit-transform: rotate3d(-0.5, 1, -0.8, 360deg);
            transform: rotate3d(-0.5, 1, -0.8, 360deg); } }