.spinner div {
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
/*     background: rgba(255,255,255,0.8); */
    background: #015F71; /* #90CCF4; */
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
    text-align: center;
    line-height: 300px;
    font-size: 24px;
    font-weight: bold;
}

.spinner .face1 { 
    transform: translateZ(150px);
}
.spinner .face2 { 
    transform: rotateY(90deg) translateZ(150px); 
}
.spinner .face3 { 
    transform: rotateY(90deg) rotateX(90deg) translateZ(150px); 
}
.spinner .face4 { 
    transform: rotateY(180deg) rotateZ(90deg) translateZ(150px); 
}
.spinner .face5 { 
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(150px); 
}
.spinner .face6 { 
    transform: rotateX(-90deg) translateZ(150px); 
}

.spinner {
    animation: spincube 12s ease-in-out infinite;
    transform-style: preserve-3d;
    transform-origin: 150px 150px 0;
}

@keyframes spincube {
    16%      { transform: rotateY(-90deg); }
    33%      { transform: rotateY(-90deg) rotateZ(90deg); }
    50%      { transform: rotateY(180deg) rotateZ(90deg); }
    66%      { transform: rotateY(90deg) rotateX(90deg); }
    83%      { transform: rotateX(90deg); }
}