ROTATING CUBE GALLERY WITH 3D EFFECT USING CSS3 AND JQUERY

When i was wondering something like flipboard magazine like effect for my client requirement. I tried many options of the 3D gallery effect. One of them I would like to share with you.

Here I just created a basic example of the image gallery slide show with 3D effect using CSS3 and JQuery.

Let see step by step.

Table of content



View Demo | Download Source


Image Gallery with 3D effect

Creating HTML5 Document.

Before we start to bake gallery, we must create HTML document.

So lets start with HTML.

index.html

This is the basic structure of our gallery page. And there is provision to put gallery content. i.e. div id=”content”.

Placing all the content on right place.

Now pull the all content into the file. i.e. images of the all side, left and right arrow.

One thing i want tell you here. before place all content. make sure all the image sizes are correct. I am using here 600 pixels wide and 400 pixels high.

For the left and right arrow i have used icons size images. You can find lots of icons from iconarchive.com.

Applying CSS to arrange content.

Arrange the content at proper place using CSS.

stylesheet.css

 

Setting up 3D Cube using CSS3

Before start arranging the cube, first set the few css rules as below.

Setting up 3D Cube css rules is looks like quit difficult to setup.

But don’t worry. If you understand it properly, how to setup cube and arrange its all sides. Its much easy to place. Lets see the below image.

3D Cube CSS3

 

 

Adding Navigation using CSS3 transition and JQuery.

Set all the transition rule for the all 4 side of the cube.

And little bit JQuery to navigate on user response.


View Demo | Download Source


0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *