.contenedor{
    width: 120px;
    height: 120px;
	perspective: 1000px;
    -webkit-perspective:1000px;
}

.dado{
	float:left;
	width:120px;
	height:120px;
	margin-left:10px;
}
.dado div {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 2px solid #222;
	line-height:120px;
}

.dado div {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 2px solid #222;
    /*display:block;*/
}


.dado .cara1 { -webkit-transform: translateZ(60px);                                }
.dado .cara2 { -webkit-transform: rotateY(90deg)  translateZ(60px);                }
.dado .cara3 { -webkit-transform: rotateY(90deg)  rotateX(90deg) translateZ(60px); }
.dado .cara4 { -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); }
.dado .cara5 { -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); }
.dado .cara6 { -webkit-transform: rotateX(-90deg) translateZ(60px); }


.dado .cara1 { transform: translateZ(60px);                                }
.dado .cara2 { transform: rotateY(90deg)  translateZ(60px);                }
.dado .cara3 { transform: rotateY(90deg)  rotateX(90deg) translateZ(60px); }
.dado .cara4 { transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); }
.dado .cara5 { transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); }
.dado .cara6 { transform: rotateX(-90deg) translateZ(60px); }


@-webkit-keyframes rotacubo {

   0% {   
   -webkit-transform: translateZ(0) rotateX(0) rotateY(0);          
   }
   50% {   
   -webkit-transform: translateZ(-800px) rotateX(180deg) rotateY(180deg);          
   }      
   100% {       
   -webkit-transform: translateZ(0) rotateX(360deg) rotateY(360deg);      
   }
 }

@keyframes rotacubo {
   0% {   
   transform: translateZ(0) rotateX(0) rotateY(0);          
   }
   50% {   
   transform: translateZ(-800px) rotateX(180deg) rotateY(180deg);          
   }      
   100% {       
   transform: translateZ(0) rotateX(360deg) rotateY(360deg);      
   }
 }

 .
  .animacubo {
    animation-name: rotacubo;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 12s;
    transform-style: preserve-3d;
    transform-origin: 60px 60px 0;
  }
 @-webkit-keyframes rotacubo2 {
    0% {    
    -webkit-transform: translateZ(0) rotateX(0) rotateY(0);           
    } 
    50% {    
    -webkit-transform: translateZ(-800px) rotateX(180deg) rotateY(180deg);           
    }       
    100% {        
    -webkit-transform: translateZ(0) rotateX(360deg) rotateY(360deg);       
    } 
  }
 @keyframes rotacubo2 {
    0% {    
    transform: translateZ(0) rotateX(0) rotateY(0);           
    } 
    50% {    
    transform: translateZ(-800px) rotateX(180deg) rotateY(180deg);           
    }       
    100% {        
    transform: translateZ(0) rotateX(360deg) rotateY(360deg);       
    } 
  }

  .animacubo2 {
    -webkit-animation-name: rotacubo2;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 0.1s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 60px 60px 0;
  }
  .animacubo2 {
    animation-name: rotacubo2;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 0.1s;
    transform-style: preserve-3d;
    transform-origin: 60px 60px 0;
  }