Advanced CSS 3D Carousel

The latest iteration of the CSS 3D Carousel is much improved over the version I demonstrated a few months ago, although it still has a ways to go. The code is a little complex to explain in a single blog post, although I do plan to share aspects of its development in future articles. I’ve left the complete code at CodePen for you to play with, if you’re interested.

So what’s different in this version?

• The distribution of carousel images is made entirely in JavaScript, which handles an arbitrary number of elements: try removing some of the figures from the CodePen version, for example.

Improvements to come:

• I’m still struggling with a bug in desktop and mobile Safari, which displaces the transform-origin-z coordinate for the gallery, pushing it forward in the browser. I’m hoping that this will be fixed in iOS / Safari 7. (Update: it wasn’t, unfortunately).
• Similarly, IE 10+ displays the carousel incorrectly due to its lack of support for transform-style.

Photographs used in this gallery example are of ballet dancers competing in the IFBB European competition photographed by Jack Devant, licensed under Creative Commons. Play with this code on CodePen