#contenedor {
    float: left; 
}

#caja {
    width: 200px;
    height: 200px;
    background: rgba(255,0,0,0.4);
    color: rgba(0,0,0,0);
    font-size: 12px;
    
    transform: ;
-webkit-transform: perspective(500px) rotateY(180deg);
-moz-transform: perspective(500px) rotateY(180deg);
-o-transform: perspective(500px) rotateY(180deg);
-ms-transform: perspective(500px) rotateY(180deg);
transform: perspective(500px) rotateY(180deg);


    
    /* transiciones */
    transition: all 0.5s ease;
}
    
#contenedor:hover #caja {
    background: rgba(0,0,255,0.4);
    transform: rotateX(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    color: rgba(0,0,0,1);    
}