CodePen

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>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @-moz-keyframes rotate-imasters-cube {
  0%   { -moz-transform: rotateX( 0dg ) rotateY( 0deg ) }
  15%  { -moz-transform: rotateX( -90deg ) rotateY( 0deg ) }
  30%  { -moz-transform: rotateX( -180deg ) rotateY( 0deg ) }
  45%  { -moz-transform: rotateX( 0deg ) rotateY( 90deg ) }
  60%  { -moz-transform: rotateX( 0deg ) rotateY( 180deg ) }
  75%  { -moz-transform: rotateX( 180deg ) rotateY( 180deg ) }
  90%  { -moz-transform: rotateX( 90deg ) rotateY( 90deg ) }
  100% { -moz-transform: rotateX( 0deg ) rotateY( 0deg ) }
}
@-webkit-keyframes rotate-imasters-cube {
  0%   { -webkit-transform: rotateX( 0dg ) rotateY( 0deg ) }
  15%  { -webkit-transform: rotateX( -90deg ) rotateY( 0deg ) }
  30%  { -webkit-transform: rotateX( -180deg ) rotateY( 0deg ) }
  45%  { -webkit-transform: rotateX( 0deg ) rotateY( 90deg ) }
  60%  { -webkit-transform: rotateX( 0deg ) rotateY( 180deg ) }
  75%  { -webkit-transform: rotateX( 180deg ) rotateY( 180deg ) }
  90%  { -webkit-transform: rotateX( 90deg ) rotateY( 90deg ) }
  100% { -webkit-transform: rotateX( 0deg ) rotateY( 0deg ) }
}
@-ms-keyframes rotate-imasters-cube {
  0%   { -ms-transform: rotateX( 0dg ) rotateY( 0deg ) }
  15%  { -ms-transform: rotateX( -90deg ) rotateY( 0deg ) }
  30%  { -ms-transform: rotateX( -180deg ) rotateY( 0deg ) }
  45%  { -ms-transform: rotateX( 0deg ) rotateY( 90deg ) }
  60%  { -ms-transform: rotateX( 0deg ) rotateY( 180deg ) }
  75%  { -ms-transform: rotateX( 180deg ) rotateY( 180deg ) }
  90%  { -ms-transform: rotateX( 90deg ) rotateY( 90deg ) }
  100% { -ms-transform: rotateX( 0deg ) rotateY( 0deg ) }
}
@keyframes rotate-imasters-cube {
  0%   { transform: rotateX( 0dg ) rotateY( 0deg ) }
  15%  { transform: rotateX( -90deg ) rotateY( 0deg ) }
  30%  { transform: rotateX( -180deg ) rotateY( 0deg ) }
  45%  { transform: rotateX( 0deg ) rotateY( 90deg ) }
  60%  { transform: rotateX( 0deg ) rotateY( 180deg ) }
  75%  { transform: rotateX( 180deg ) rotateY( 180deg ) }
  90%  { transform: rotateX( 90deg ) rotateY( 90deg ) }
  100% { transform: rotateX( 0deg ) rotateY( 0deg ) }
}



#container {
    -moz-perspective: 700px;
    -webkit-perspective: 700;
    -ms-perspective: 700;
    perspective: 700;
    
    -moz-perspective-origin: 50% 175px;
    -webkit-perspective-origin: 50% 175px;
    -ms-perspective-origin: 50% 175px;
    perspective-origin: 50% 175px;
}

    #imasters-cube {
        height: 350px;
        margin: 100px auto 0;
        position: relative;
    
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;

        -moz-transition: -moz-transform 2s linear;
        -webkit-transition: -webkit-transform 2s linear;
        -ms-transition: -ms-transform 2s linear;
        transition: transform 2s linear;
        
        -moz-animation: rotate-imasters-cube 10s infinite;
        -webkit-animation: rotate-imasters-cube 10s infinite;
        -ms-animation: rotate-imasters-cube 10s infinite;
        animation: rotate-imasters-cube 10s infinite;
    
        width: 350px;
    }

        #imasters-cube > div {
            background-image: -moz-linear-gradient(top, rgba(0,102,102,1) 0%, rgba(0,102,102,1) 33.33%, rgba(255,255,255,1) 33.33%, rgba(255,255,255,1) 34%, rgba(0,102,102,1) 34%, rgba(0,102,102,1) 67.33%, rgba(255,255,255,1) 67.33%, rgba(255,255,255,1) 68%, rgba(0,102,102,1) 68%);
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,102,102,1)), color-stop(33.33%,rgba(0,102,102,1)), color-stop(33.33%,rgba(255,255,255,1)), color-stop(34%,rgba(255,255,255,1)), color-stop(34%,rgba(0,102,102,1)), color-stop(67.33%,rgba(0,102,102,1)), color-stop(67.33%,rgba(255,255,255,1)), color-stop(68%,rgba(255,255,255,1)), color-stop(68%,rgba(0,102,102,1)));
            background-image: -webkit-linear-gradient(top, rgba(0,102,102,1) 0%,rgba(0,102,102,1) 33.33%,rgba(255,255,255,1) 33.33%,rgba(255,255,255,1) 34%,rgba(0,102,102,1) 34%,rgba(0,102,102,1) 67.33%,rgba(255,255,255,1) 67.33%,rgba(255,255,255,1) 68%,rgba(0,102,102,1) 68%);
            background-image: -ms-linear-gradient(top, rgba(0,102,102,1) 0%,rgba(0,102,102,1) 33.33%,rgba(255,255,255,1) 33.33%,rgba(255,255,255,1) 34%,rgba(0,102,102,1) 34%,rgba(0,102,102,1) 67.33%,rgba(255,255,255,1) 67.33%,rgba(255,255,255,1) 68%,rgba(0,102,102,1) 68%);
            background-image: linear-gradient(to bottom, rgba(0,102,102,1) 0%,rgba(0,102,102,1) 33.33%,rgba(255,255,255,1) 33.33%,rgba(255,255,255,1) 34%,rgba(0,102,102,1) 34%,rgba(0,102,102,1) 67.33%,rgba(255,255,255,1) 67.33%,rgba(255,255,255,1) 68%,rgba(0,102,102,1) 68%);
    
            background-clip: content-box;
    
            border: 1.75px solid #FFF;
            
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
    
            height: 350px;
            padding: 0 115px;
            position: absolute;
            width: 350px;
        }

        #imasters-cube > div:before, #imasters-cube > div:after {
            background-image: -moz-linear-gradient(top, rgba(0,102,102,1) 0%, rgba(0,102,102,1) 33.33%, rgba(255,255,255,1) 33.33%, rgba(255,255,255,1) 34%, rgba(0,102,102,1) 34%, rgba(0,102,102,1) 67.33%, rgba(255,255,255,1) 67.33%, rgba(255,255,255,1) 68%, rgba(0,102,102,1) 68%);
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,102,102,1)), color-stop(33.33%,rgba(0,102,102,1)), color-stop(33.33%,rgba(255,255,255,1)), color-stop(34%,rgba(255,255,255,1)), color-stop(34%,rgba(0,102,102,1)), color-stop(67.33%,rgba(0,102,102,1)), color-stop(67.33%,rgba(255,255,255,1)), color-stop(68%,rgba(255,255,255,1)), color-stop(68%,rgba(0,102,102,1)));
            background-image: -webkit-linear-gradient(top, rgba(0,102,102,1) 0%,rgba(0,102,102,1) 33.33%,rgba(255,255,255,1) 33.33%,rgba(255,255,255,1) 34%,rgba(0,102,102,1) 34%,rgba(0,102,102,1) 67.33%,rgba(255,255,255,1) 67.33%,rgba(255,255,255,1) 68%,rgba(0,102,102,1) 68%);
            background-image: -ms-linear-gradient(top, rgba(0,102,102,1) 0%,rgba(0,102,102,1) 33.33%,rgba(255,255,255,1) 33.33%,rgba(255,255,255,1) 34%,rgba(0,102,102,1) 34%,rgba(0,102,102,1) 67.33%,rgba(255,255,255,1) 67.33%,rgba(255,255,255,1) 68%,rgba(0,102,102,1) 68%);
            background-image: linear-gradient(to bottom, rgba(0,102,102,1) 0%,rgba(0,102,102,1) 33.33%,rgba(255,255,255,1) 33.33%,rgba(255,255,255,1) 34%,rgba(0,102,102,1) 34%,rgba(0,102,102,1) 67.33%,rgba(255,255,255,1) 67.33%,rgba(255,255,255,1) 68%,rgba(0,102,102,1) 68%);
    
            content: '';
            display: block;
            height: 100%;
            position: absolute;
            width: 115px;
        }
        #imasters-cube > div:before {
            border-right: 2.5px solid #FFF;
            left: 0; top: 0;
        }
        #imasters-cube > div:after {
            border-left: 2.5px solid #FFF;
            right: 0; top: 0;
        }

        #imasters-cube .front {
            background-image: -moz-linear-gradient(top, rgba(237,96,26,1) 0%, rgba(237,96,26,1) 33.33%, rgba(255,255,255,1) 33.33%, rgba(255,255,255,1) 34%, rgba(237,96,26,1) 34%, rgba(237,96,26,1) 67.33%, rgba(255,255,255,1) 67.33%, rgba(255,255,255,1) 68%, rgba(237,96,26,1) 68%);
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,96,26,1)), color-stop(33.33%,rgba(237,96,26,1)), color-stop(33.33%,rgba(255,255,255,1)), color-stop(34%,rgba(255,255,255,1)), color-stop(34%,rgba(237,96,26,1)), color-stop(67.33%,rgba(237,96,26,1)), color-stop(67.33%,rgba(255,255,255,1)), color-stop(68%,rgba(255,255,255,1)), color-stop(68%,rgba(237,96,26,1)));
            background-image: -webkit-linear-gradient(top, rgba(237,96,26,1) 0%,rgba(237,96,26,1) 33.33%,rgba(255,255,255,1) 33.33%,rgba(255,255,255,1) 34%,rgba(237,96,26,1) 34%,rgba(237,96,26,1) 67.33%,rgba(255,255,255,1) 67.33%,rgba(255,255,255,1) 68%,rgba(237,96,26,1) 68%);
            background-image: -ms-linear-gradient(top, rgba(237,96,26,1) 0%,rgba(237,96,26,1) 33.33%,rgba(255,255,255,1) 33.33%,rgba(255,255,255,1) 34%,rgba(237,96,26,1) 34%,rgba(237,96,26,1) 67.33%,rgba(255,255,255,1) 67.33%,rgba(255,255,255,1) 68%,rgba(237,96,26,1) 68%);
            background-image: linear-gradient(to bottom, rgba(237,96,26,1) 0%,rgba(237,96,26,1) 33.33%,rgba(255,255,255,1) 33.33%,rgba(255,255,255,1) 34%,rgba(237,96,26,1) 34%,rgba(237,96,26,1) 67.33%,rgba(255,255,255,1) 67.33%,rgba(255,255,255,1) 68%,rgba(237,96,26,1) 68%);
    
            -moz-transform: translateZ(175px);
            -webkit-transform: translateZ(175px);
            -ms-transform: translateZ(175px);
            transform: translateZ(175px);
        }        

        #imasters-cube .back {
            -moz-transform: rotateY(180deg) translateZ(175px);
            -webkit-transform: rotateY(180deg) translateZ(175px);
            -ms-transform: rotateY(180deg) translateZ(175px);
            transform: rotateY(180deg) translateZ(175px);
        }

        #imasters-cube .top {
            background-image: -moz-linear-gradient(top, rgba(32,174,187,0.6) 0%, rgba(32,174,187,0.6) 33.33%, rgba(255,255,255,1) 33.33%, rgba(255,255,255,1) 34%, rgba(32,174,187,0.6) 34%, rgba(32,174,187,0.6) 67.33%, rgba(255,255,255,1) 67.33%, rgba(255,255,255,1) 68%, rgba(171,27,30,1) 68%);
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(32,174,187,0.6)), color-stop(33.33%,rgba(32,174,187,0.6)), color-stop(33.33%,rgba(255,255,255,1)), color-stop(34%,rgba(255,255,255,1)), color-stop(34%,rgba(32,174,187,0.6)), color-stop(67.33%,rgba(32,174,187,0.6)), color-stop(67.33%,rgba(255,255,255,1)), color-stop(68%,rgba(255,255,255,1)), color-stop(68%,rgba(171,27,30,1)));
            background-image: -webkit-linear-gradient(top, rgba(32,174,187,0.6) 0%,rgba(32,174,187,0.6) 33.33%,rgba(255,255,255,1) 33.33%,rgba(255,255,255,1) 34%,rgba(32,174,187,0.6) 34%,rgba(32,174,187,0.6) 67.33%,rgba(255,255,255,1) 67.33%,rgba(255,255,255,1) 68%,rgba(171,27,30,1) 68%);
            background-image: -ms-linear-gradient(top, rgba(32,174,187,0.6) 0%,rgba(32,174,187,0.6) 33.33%,rgba(255,255,255,1) 33.33%,rgba(255,255,255,1) 34%,rgba(32,174,187,0.6) 34%,rgba(32,174,187,0.6) 67.33%,rgba(255,255,255,1) 67.33%,rgba(255,255,255,1) 68%,rgba(171,27,30,1) 68%);
            background-image: linear-gradient(to bottom, rgba(32,174,187,0.6) 0%,rgba(32,174,187,0.6) 33.33%,rgba(255,255,255,1) 33.33%,rgba(255,255,255,1) 34%,rgba(32,174,187,0.6) 34%,rgba(32,174,187,0.6) 67.33%,rgba(255,255,255,1) 67.33%,rgba(255,255,255,1) 68%,rgba(171,27,30,1) 68%);
    
            -moz-transform: rotateX(90deg) translateZ(175px);
            -webkit-transform: rotateX(90deg) translateZ(175px);
            -ms-transform: rotateX(90deg) translateZ(175px);
            transform: rotateX(90deg) translateZ(175px);
        }

        #imasters-cube .right {
            -moz-transform: rotateY(90deg) translateZ(175px);
            -webkit-transform: rotateY(90deg) translateZ(175px);
            -ms-transform: rotateY(90deg) translateZ(175px);
            transform: rotateY(90deg) translateZ(175px);
        }

        #imasters-cube .bottom {
            -moz-transform: rotateX(-90deg) translateZ(175px) rotate(180deg);
            -webkit-transform: rotateX(-90deg) translateZ(175px) rotate(180deg);
            -ms-transform: rotateX(-90deg) translateZ(175px) rotate(180deg);
            transform: rotateX(-90deg) translateZ(175px) rotate(180deg);
        }

        #imasters-cube .left {
            -moz-transform: rotateY(-90deg) translateZ(175px);
            -webkit-transform: rotateY(-90deg) translateZ(175px);
            -ms-transform: rotateY(-90deg) translateZ(175px);
            transform: rotateY(-90deg) translateZ(175px);
        }

        #imasters-cube .front:before, #imasters-cube .front:after,
        #imasters-cube .top:before, #imasters-cube .top:after,
        #imasters-cube .right:before, #imasters-cube .right:after,
        #imasters-cube .right {
            background-image: -moz-linear-gradient(top, rgba(32,174,187,0.6) 0%, rgba(32,174,187,0.6) 33.33%, rgba(255,255,255,1) 33.33%, rgba(255,255,255,1) 34%, rgba(32,174,187,0.6) 34%, rgba(32,174,187,0.6) 67.33%, rgba(255,255,255,1) 67.33%, rgba(255,255,255,1) 68%, rgba(32,174,187,0.6) 68%);
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(32,174,187,0.6)), color-stop(33.33%,rgba(32,174,187,0.6)), color-stop(33.33%,rgba(255,255,255,1)), color-stop(34%,rgba(255,255,255,1)), color-stop(34%,rgba(32,174,187,0.6)), color-stop(67.33%,rgba(32,174,187,0.6)), color-stop(67.33%,rgba(255,255,255,1)), color-stop(68%,rgba(255,255,255,1)), color-stop(68%,rgba(32,174,187,0.6)));
            background-image: -webkit-linear-gradient(top, rgba(32,174,187,0.6) 0%,rgba(32,174,187,0.6) 33.33%,rgba(255,255,255,1) 33.33%,rgba(255,255,255,1) 34%,rgba(32,174,187,0.6) 34%,rgba(32,174,187,0.6) 67.33%,rgba(255,255,255,1) 67.33%,rgba(255,255,255,1) 68%,rgba(32,174,187,0.6) 68%);
            background-image: -ms-linear-gradient(top, rgba(32,174,187,0.6) 0%,rgba(32,174,187,0.6) 33.33%,rgba(255,255,255,1) 33.33%,rgba(255,255,255,1) 34%,rgba(32,174,187,0.6) 34%,rgba(32,174,187,0.6) 67.33%,rgba(255,255,255,1) 67.33%,rgba(255,255,255,1) 68%,rgba(32,174,187,0.6) 68%);
            background-image: linear-gradient(to bottom, rgba(32,174,187,0.6) 0%,rgba(32,174,187,0.6) 33.33%,rgba(255,255,255,1) 33.33%,rgba(255,255,255,1) 34%,rgba(32,174,187,0.6) 34%,rgba(32,174,187,0.6) 67.33%,rgba(255,255,255,1) 67.33%,rgba(255,255,255,1) 68%,rgba(32,174,187,0.6) 68%);
        }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................