Enchainer rotation d'une meme image sur axe vertical puis horizontal

bonjour
je voudrais enchainer l'animation d'une image d'abord sur un axe vertical puis horizontal
j'ai trouve ceci...
Si je change les Y par des X j'ai une rotation sur un axe horizontal mais comment enchainer les deux sur la meme image et pouvoir stopper l'animation quand on met la souris?

merci

 <style>
div.slidecaption {
   -webkit-animation-name: spinner; 
  -webkit-animation-timing-function: linear; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-duration: 12s;
  -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
  animation-delay: 2s;
  animation-name: spinner; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-duration: 12s; 
  -webkit-transform-style: preserve-3d; 
  -moz-transform-style: preserve-3d; 
  -ms-transform-style: preserve-3d; 
  transform-style: preserve-3d;
}


/* WebKit and Opera browsers */ 
@-webkit-keyframes spinner { 
  from 
  { 
    -webkit-transform: rotateY(0deg); 
  } 
  to { 
    -webkit-transform: rotateY(-360deg); 
  } 
} 
/* all other browsers */ 
@keyframes spinner { 
   from { 
    -moz-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
   } 
   to 
   { 
    -moz-transform: rotateY(-360deg); 
    -ms-transform: rotateY(-360deg); 
    transform: rotateY(-360deg); 

   } 
}
</style>
 <div class="slidecaption" style="width: 170px; height: 145px;"><img src="image.gif"></div>

Bonjour Pouemes,

C'est ce genre ce chose que vous souhaitez faire ?
http://codepen.io/auredud/pen/EgKEXJ

Bonjour,

Erwan21a a écrit :
C'est ce genre ce chose que vous souhaitez faire ?
http://codepen.io/auredud/pen/EgKEXJ

Si c'est le cas, je pense que pour

Pouemes a écrit :
pouvoir stopper l'animation quand on met la souris

il faudra ajouter

.slidecaption:hover {
  animation-play-state: paused;
}

Modifié par Greg_Lumiere (15 Sep 2016 - 10:41)

merci pour vos reponses
en fait j'ai pas mal cherche de mon cote
j'en suis arrive a ce genre de code mais j'ai un probleme d'image un peu surligne au passage de la seconde image
puis et surtout a la fin de l'animation ca deraille completement, et j'ai beau tester differentes choses je ne vois pas quoi faire, si quelqu'un avait des idees, et la pause ne marche pas
*dans l'exemple que tu montre greg il n'y a qu'une seul image, peut tre que je pourrais me passer de la seconde je ne sais pas
merci

 <style>
.slidecaption {
  position:relative;
  height:145px;
  width:170px;
  margin:0 auto;
}
.slidecaption img {
  position:absolute;
  left:0;
}
#test1 {  
             animation: spinner 12s linear infinite;

  transform-style: preserve-3d;
}
#test2 {  
             animation: spinner1 12s linear infinite;

  transform-style: preserve-3d;
}
.slidecaption:hover 
{
     animation-play-state: paused;
	 
}
img:nth-of-type(1) {
  animation-delay: 2s;
}
img:nth-of-type(2) {
  animation-delay: 2s;
}
@keyframes spinner{0%{opacity:0;transform:rotateY(0deg);}5%{opacity:1;transform:rotateY(18deg);}10%{opacity:1;transform:rotateY(36deg);}15%{opacity:1;transform:rotateY(54deg);}20%{opacity:1;transform:rotateY(72deg);}25%{opacity:1;transform:rotateY(90deg);}30%{opacity:1;transform:rotateY(108deg);}35%{opacity:1;transform:rotateY(126deg);}40%{opacity:1;transform:rotateY(144deg);}45%{opacity:1;transform:rotateY(162deg);}50%{opacity:1;transform:rotateY(180deg);}55%{opacity:0;transform:rotateY(198deg);}60%{opacity:0;transform:rotateY(216deg);}65%{opacity:0;transform:rotateY(234deg);}70%{opacity:0;transform:rotateY(252deg);}75%{opacity:0;transform:rotateY(270deg);}80%{opacity:0;transform:rotateY(288deg);}85%{opacity:0;transform:rotateY(306deg);}90%{opacity:0;transform:rotateY(324deg);}95%{opacity:0;transform:rotateY(-342deg);}100%{opacity:0;transform:rotateY(360deg);}}
@keyframes spinner1{0%{opacity:0;transform:rotateX(-180deg);}5%{opacity:0;transform:rotateX(-162deg);}10%{opacity:0;transform:rotateX(-144deg);}15%{opacity:0;transform:rotateX(-126deg);}20%{opacity:0;transform:rotateX(-108deg);}25%{opacity:0;transform:rotateX(-90deg);}30%{opacity:0;transform:rotateX(-72deg);}35%{opacity:0;transform:rotateX(-54deg);}40%{opacity:0;transform:rotateX(-36deg);}45%{opacity:0;transform:rotateX(-18deg);}50%{opacity:1;transform:rotateX(0deg);}55%{opacity:1;transform:rotateX(18deg);}60%{opacity:1;transform:rotateX(36deg);}65%{opacity:1;transform:rotateX(54deg);}70%{opacity:1;transform:rotateX(72deg);}75%{opacity:1;transform:rotateX(90deg);}80%{opacity:1;transform:rotateX(108deg);}85%{opacity:1;transform:rotateX(126deg);}90%{opacity:1;transform:rotateX(144deg);}95%{opacity:1;transform:rotateX(-162deg);}100%{opacity:1;transform:rotateX(180deg);}}
</style>
 <div class="slidecaption">
 	<img id="test1" src="http://pouemes.free.fr/poemes-amour/poeme-abe.gif">
 	<img id="test2" src="http://pouemes.free.fr/poemes-amour/abe.gif"></div>

je cherche à avoir le meme rendu qu'avec mon javascript
comme ici
http://pouemes.free.fr/traduction-afrique/poeme-abe.htm