How To Create Image Slideshow With Rotating Effect

Here are examples with CSS, JavaScript, and HTML codes to create an image slideshow with rotating effect. In this example, each image will be rotated from 0 deg to 360 deg along with an image slideshow which can be done using rotate() function on the CSS transform property which is already described in 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: