CODEWITHSUNDEEP
htmlcss
Mahdi Ghiasi
Mahdi Ghiasi

Reputation: 15311

Simple Carousel with CSS3

I'm trying to create a 3D Carousel using CSS3 (transform).

But, there is a problem.

Look at the pictures below:

enter image description here

The first image is result of my current code (which likes looking carousel from inside, also with bugs :P ), but I want to get something like second image. (looking like a carousel from outside, and bug free!)

This is my code.

I can use negative values of degrees for this purpose; but if I do that, the height of left and right divs will be bigger than center div. Like this.

How to get something like the second image? Which CSS Transform codes should I use?

Upvotes: 1

Views: 1784

Answers (2)

Uttara
Uttara

Reputation: 2532

here is working Demo of what you want

EDIT: In order to fix the height issue on applying the negative transform rotate, you need to give -ve translation along z-axis and also -ve and +ve translation along X-axis to left and right elements respectively.

EDIT: well there are lot of tutorials explaining the use of css3 translation I am pointing to one of those

http://www.w3schools.com/css3/css3_2dtransforms.asp

Upvotes: 1

Greg Rozmarynowycz
Greg Rozmarynowycz

Reputation: 2085

You simply need to reverse the perspective angles; for a1 you needed rotateY(-20) and for c1 you needed rotateY(20):

http://jsfiddle.net/thundercracker/upEC6/4/

EDIT:

Seeing your comment; the height of the div is going to be larger because the edge of the div is virtually closer to you. If you want the divs to appear to be the exact same height, you need to reduce their initial height a few pixels, or increase the height of the center div to 'zoom' it, like the edges of the rotated divs are 'zoomed in'. When the rotation angle is reversed you don't notice the height difference because it is small.

EDIT:

In addition the far edges of the div slightly smaller than the closer edges; if your divs were long enough one edge would be the height of the screen and then other would be a tiny point.

Upvotes: 1

Related Questions