How to insert a CSS tranform rotate animation in JS fadein and fadeout slideshow?

Question

I'm having an idea but I cannot apply it because I am not very familiar with Javascript. My problem is I have a JS script for fadein and fadeout slideshow, however, it seems to be nice to have a page rotation during transition. I have a CSS hover style to do this [.card:hover .card__side--front {transform: rotateY(-180deg); }] but I don't know how to integrate it in the JS script. Here is the JS script of the slideshow:

<script>
  $("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(3000)
    .next()
    .fadeIn(3000)
    .end()
    .appendTo('#slideshow')
;
    ;
},  30000);
</script>

Answer 1

You may try out like,

 var imgDuration = 3000; function slideShow() { document.getElementById('slider').className += "fadeOut"; setTimeout(function() { document.getElementById('slider').className = ""; },1000); setTimeout(slideShow, imgDuration); } slideShow(); 

 #slider { width:100px; height:70px; opacity:1; transition: all 1s; } #slider.fadeOut { opacity:0; transform: rotate(1800deg); } 

 <img id="slider" src="http://pngriver.com/wp-content/uploads/2018/03/Download-Batman-Fidget-Spinner-PNG-Transparent-058.png"> 

I have changed the code from the following reference,

REFERENCE: http://jsfiddle.net/pdb4kb1a/2/