Probléme réalisation d'un porte folio avec du css3

Bonjour je vous presente mon probleme ,

j'ai crée un porte folio, avec du css3,mais je debute,

c'est pour l'effet

.page{
    background-color:#fff;
    width:960px;
    border:solid 1px #42aec2;
    
    font-size:18px;
    padding:10px;
    -webkit-transform: rotate(-12deg);
    
}
.page:hover { 
-moz-transform: rotate(180deg);  
  -webkit-transform: rotate(180deg);
     -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;  
} 

et sur ce porte folio, j`ai cree une animation ; l`image doit effectuer une rotation au momemt ou la souris passe dessus avec un mouvement fluide. Malheureusement, quand on retire la souris l`image se remet d`un seul coup droite. J`aimerais savoir ce que je dois faire pour que l`image se remette droite avec un mouvement fluide. Sauriez vous m`aider s`il vous plait ?

Voila la page en question
http://knulp.99k.org/dream/

Regarde ici transition-timing-function

Un grand merci

La réponse était toute simple: Quand on code comme un barbare sans réflechire

.page{
	background-color:#fff;
	width:960px;
	border:solid 1px #42aec2;
	
	font-size:18px;
	padding:10px;
	 -webkit-transition-property:-webkit-transform;
				-webkit-transition-duration: 2s;
	
}
.page:hover{ 
-moz-transform: rotate(180deg);  
  -webkit-transform: rotate(180deg);
	 -webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	
} 

c'est mieux comme ça, même si c'est pas très esthétique.