After researching a good method to create a 3D Carousel I came across two resources that intrigued me; firstly GOTOANDLEARN.com which provided an amazing flash 3D Carousel tutorial and then the jQuery 3D Carousel.

code

html

As can be seen below the HTML is very simple and consists of a main container wrapping several divs with images inside.  That is all that is required at this stage from an html perspective.  Obviously the number of images and the images themselves can be changed here.

<div id="carousel">
    <div><a href="#"><img src="images/dreamweaver.png" /></a></div>
    
    <div><a href="#"><img src="images/director.png" /></a></div>
    
    <div><a href="#"><img src="images/flash.png" /></a></div>
    
    <div><a href="#"><img src="images/freehand.png" /></a></div>
    
    <div><a href="#"><img src="images/swf-player.png" /></a></div>
    
    <div><a href="#"><img src="images/coldfusion.png" /></a></div>
</div>

The CSS is also very  simple setting the style attributes for the main container as well as the images width and height within each of their containing divs.  One point to note would be that the width and height of the carousel container should be edited as desired to meet your needs althoug further editing will be needed below as shown.

<style>

    #carousel{
        background-color:#000000;
        width:700px;
        height:400px;
        position:relative;
        border:1px solid #FFFFFF;
    }
    
    img{
        width:100%;
        height:100%;
        border:0px solid #FFFFFF;
    }
    
</style>

Variables

This is where understanding is required to set up the carousel. baseSpeed is the initial speed of the carousel, the higher the value the faster it will spin, radiusX and radiusY are the horizontal and vertical radiuses of the carousel so adjust these to effectively change the width and height.

centerX and centerY pinpoint the center of the accordion with in the main container. These will need to be amended if the main containers width and height attributes are amended.

Finally speed is used in conjunction with baseSpeed to set the initial speed of the carousel, although, the speed will be altered depending on the position x of the mouse over the carousel container.

var baseSpeed = 0.05;
var radiusX = 190;
var radiusY = 40;
var centerX = 300;
var centerY = 190;
var speed = 0.3;