360 Degree Rotating Carousel with jQuery and CSS3 - rotataDiz

rotataDiz is a simple lightweight jQuery carousel plugin that allows you to rotate a set of images with CSS3 transitions and transforms. The plugin will automatically add reflection effects on the images, a little similar to the 3D 'cover flow' effect.

How to use it:

1. Include the jQuery rotataDiz plugin after jQuery javascript library in your Html file.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.rotataDiz.min.js"></script>

2. Wrap the images in the html element with class of 'eachBit'.

<div id="rotata">
<div class="eachBit"><img src="images/1.jpg"/></div>
<div class="eachBit rty"><img src="images/2.jpg"/></div>
<div class="eachBit"><img src="images/3.jpg"/></div>
...
</div>

3. The required CSS styles. You can also include the style.css directly in your Html page.

#rotata {
position: relative;
width: 300px;
height: 300px;
margin: auto;
-moz-transform: rotateX(55deg);
-webkit-transform: rotateX(55deg);
transform: rotateX(55deg);
}
.eachBit {
color:font-size:30px;
color: #ffffff;
width: 200px;
height: 200px;
position: absolute;
background-color: #666666;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
transition-property: all;
-moz-transition-property: all;
-webkit-transition-property: all;
}
.eachBit img {
width: 100%;
height: 100%
}
.rotateBackRotata, .rotateForwardRotata {
top: 50%;
position: absolute;
background-color: rgba(0,0,0,0.8);
width: 70px;
height: 70px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
padding: 0;
margin: 0;
text-align: center;
color: #ffffff;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
font-size: 35px;
border: 1px solid rgba(255,255,255,0.3);
cursor: pointer;
}
.rotateBackRotata {
left: -100px;
}
.rotateForwardRotata {
right: -100px;
}

4. Call the plugin on the wrapper element and set the options for the rotating carousel.

<script type="text/javascript">
$(document).ready(function() {
$('#rotata').rotata({
'rotate':false,
'circleCenterX':150,
'circleCenterY':150,
'circleRad':250, // radius of circle
'autoPlay':false, // auto rotate
'transitionTime':'1s' // transition time between one movement
});
});
</script>

---

This awesome jQuery plugin is developed by pradeepuxd. For more Advanced Usages, please check the demo page or visit the official website.