<div class="spinner-wrap">
        <div class="spinner-cube">
     <div class="spinner-front"></div>
          <div class="spinner-back"></div>
          <div class="spinner-right"></div>
          <div class="spinner-left"></div> 
<!--           <div class="spinner-top"></div>
        <div class="spinner-bottom"></div>  -->
        </div>
      </div>

* {
 box-sizing: border-box;
}

body {
  margin:0;
  padding:0;
  background-color: #F7F3F0;
  overflow: hidden;
}

.spinner-wrap {
  display: flex;
  position: absolute;
  
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;  
 
  perspective: 80px;
  perspective-origin: 50% 20px;  
  z-index: 3000;

}

.spinner-cube {	
  position: relative;
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 0;
	text-align: center;	
	-webkit-perspective: 300px;
	perspective: 300px;
}

.spinner-cube div {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d; /* IE 11 or below doesn't support this, so in IE, we need to add another "perspective" property here via IE specific media queries (see below) */
	-webkit-transform: translate3D(0,0,-20px);
	transform: translate3D(0,0,-20px); 
	list-style: none;
	margin: 1;
	padding: 0;
	width: 100%;
	height: 100%;  
	position: absolute;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: block;
}

@keyframes spinner-front {
  0% {
    	-webkit-transform: rotateY(0deg) translate3D(0,0,20px);
	     transform: rotateY(0deg) translate3D(0,0,20px); 
  }
  100% {
   	-webkit-transform: rotateY(360deg) translate3D(0,0,20px);
	    transform: rotateY(360deg) translate3D(0,0,20px); 
  }
}

@keyframes spinner-back {
  0% {
    	-webkit-transform: rotateY(-90deg) translate3D(0,0,20px);
	    transform: rotateY(-90deg) translate3D(0,0,20px); 
  }
  100% {
   	-webkit-transform: rotateY(270deg) translate3D(0,0,20px);
	  transform: rotateY(270deg) translate3D(0,0,20px);
  }
}

@keyframes spinner-right {
  0% {
    	-webkit-transform: rotateY(-180deg) translate3D(0,0,20px);
      transform: rotateY(-180deg) translate3D(0,0,20px);
  }
  100% {
   	-webkit-transform: rotateY(180deg) translate3D(0,0,20px);
	  transform: rotateY(180deg) translate3D(0,0,20px);
  }
}

@keyframes spinner-left {
  0% {
    	-webkit-transform: rotateY(-270deg) translate3D(0,0,20px);
	    transform: rotateY(-270deg) translate3D(0,0,20px);
  }
  100% {
   	-webkit-transform: rotateY(90deg) translate3D(0,0,20px);
	  transform: rotateY(90deg) translate3D(0,0,20px);
  }
}


.spinner-front {
  animation: spinner-front 2.5s linear infinite;
  background: #11766d;
}

.spinner-back{
  animation: spinner-back 2.5s linear infinite; 
  background: #195176;
}

.spinner-right{
	animation: spinner-right 2.5s linear infinite;
  background: #a8155b;
}

.spinner-left{
	animation: spinner-left 2.5s linear infinite;
  background: #468448;
}

.spinner-top {
 	-webkit-transform: rotateY(-270deg) translate3D(0,0,2em);
	transform: rotateY(-270deg) translate3D(0,0,2em);
  background: #d14444;
}

/* .spinner-bottom {
 	-webkit-transform: rotateX(-90deg) translate3D(0,0,2em);
  transform: rotateX(-90deg)
  background: #613860;
} */


/* IE specific media query to target IE10 and IE11, since it doesn't support preserve-3d */
/* See: https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 
	.spinner-cube div{
		perspective: 600px;
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.