Para la primera duda, simplemente añade la transición al selector normal del elemento en lugar de hacerlo junto a la pseudo-clase
:hover:
Código CSS:
Ver original#logo {
transition: all 2.3s ease-in-out;
}
#logo:hover {
transform: rotateY(-360deg);
}
Para lo otro usa animaciones como dice
C2am o también una técnica llamada
CSS Flip:
http://davidwalsh.name/css-flip