Home/ Questions/Q 8357643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T10:32:41+00:00

I’m trying to create a 3D Carousel using CSS3 ( transform ). But, there

  • 0

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 😛 ), 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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0