Tal como menciona liu7 se puede realizar mediante JavaScript, este nos permite interactuar con la pagina web. Te dejo un ejemplo funcional utilizando JS+CSS, espero te sea util.
var posicioncarta = 1; //1=Carta boca abajo / 0=Carta boca arriba
function Click() {
if (posicioncarta==1){
document.getElementById('carta').className='card2';
posicioncarta=0;
}
else{
document.getElementById('carta').className='cards';
posicioncarta=1;
}
}
.cards {
display: block;
background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-webkit-linear-gradient(Royalblue,Royalblue);
background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-moz-linear-gradient(Royalblue,Royalblue);
background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-o-linear-gradient(Royalblue,Royalblue);
background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),linear-gradient(Royalblue,Royalblue);
background-size: 110px, cover;
background-repeat: no-repeat, no-repeat;
background-position: center;
width: 200px;
height: 255px;
border: 5px solid white;
border-radius: 5px;
}
.card2{
display: block;
background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-webkit-linear-gradient(Red,Red);
background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-moz-linear-gradient(Red,Red);
background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-o-linear-gradient(Red,Red);
background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),linear-gradient(Red,Red);
background-size: 110px, cover;
background-repeat: no-repeat, no-repeat;
background-position: center;
width: 200px;
height: 255px;
border: 5px solid green;
border-radius: 5px;
}
<div class="cards" id="carta" onclick="Click()"></div>
El ejemplo es muy sencillo y se entiende que es para ejemplificar la funcionalidad de JavaScript con el fin de lograr el resultado. La solución no es la mas optima(a modo de recursos) ya que estamos cargando las imágenes una y otra vez, una mejor opción seria tener cargadas las dos imágenes desde un comienzo y jugar sus atributos de visibilidad para ocultar una y mostrar otra.