How To Create Image Slideshow With Rotating Effect

Here are examples with CSS, JavaScript and HTML codes to create image slideshow with rotating effect. In this example, each image will rotated from 0 deg to 360 deg along with image slideshow which can be done using rotate() function on CSS transform property which is already described on the previous posts about transforming elements using CSS and creating animation using CSS transforms.

You can create Image SlideShow with rotating effect on X-axis or Y-axis using rotateX() or rotateY() function on CSS transform property. The default function rotate() acts same as rotateX() function.

Creating Image Slideshow With Rotating on X-axis


Here is an example with CSS, JavaScript and HTML codes to create image slideshow with rotating effect on X-axis.

CSS Code:

@-webkit-keyframes rotate{
  from {-webkit-transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);}
}
  @keyframes rotate{
  from {-moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);}
   
    to {-moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);}
  }

#rotate{
  -webkit-animation-name:rotate;
  -webkit-timing-function:linear;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-duration:5s;
 
  animation-name:rotate;
  timing-function:linear;
  animation-iteration-count:infinite;
  animation-duration:5s;
  width:100%;
  height:300px;
  }

JavaScript Code:

var i=0;
var path=new Array();

//List of Images
path[0]="image2.jpg";
path[1]="image3.jpg";
path[2]="image4.jpg";

function slide1()
{
document.slide.src=path[i];
if(i<path.length-1) i++;else i=0;
setTimeout("slide1()",5000);
}
setTimeout("slide1()",0);

HTML Code:

<img id="rotate" name="slide" src="image2.jpg">

Preview:


Creating Image Slideshow With Rotating on Y-axis


Here is an example with CSS, JavaScript and HTML codes to create image slideshow with rotating effect on Y-axis.

CSS Code:

@-webkit-keyframes rotateY{
  from {-webkit-transform:rotateY(0deg);}
    to {-webkit-transform:rotateY(360deg);}
}
  @keyframes rotateY{
  from {-moz-transform:rotateY(0deg);
        -ms-transform:rotateY(0deg);
        transform:rotateY(0deg);}
   
    to {-moz-transform:rotateY(360deg);
        -ms-transform:rotateY(360deg);
        transform:rotateY(360deg);}
  }

#rotateY{
  -webkit-animation-name:rotateY;
  -webkit-timing-function:linear;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-duration:5s;
 
  animation-name:rotateY;
  timing-function:linear;
  animation-iteration-count:infinite;
  animation-duration:5s;
  width:100%;
  height:300px;
  }

JavaScript Code:

<script>
var j=0;
var path1=new Array();

//List of Images
path1[0]="image2.jpg";
path1[1]="image3.jpg";
path1[2]="image4.jpg";

function slide2()
{
document.slide1.src=path[j];
if(j<path1.length-1) j++;else j=0;
setTimeout("slide2()",5000);
}
setTimeout("slide2()",0);
</script>

HTML Code:

<img id="rotateY" name="slide1" src="image2.jpg">

Preview: