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?
- Each image is contained in its own separate figure, with its own caption. (mouseover the forefront image to see its caption).
- Click-to-zoom is enabled on the foreground image.
- Keyboard controls are available: cursor right and left to rotate the carousel, Z to toggle zoom on the foreground image, and C to toggle its caption.
Improvements to come:
- I’m still struggling with a bug in desktop and mobile Safari, which displaces the
transform-origin-zcoordinate 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
- Display at small viewport sizes needs to be improved; I’ll add swipe gesture support once the Safari and IE display problem are licked.
- As the number of images in the gallery increases, the radius of the carousel should increase to fit them all.
Photographs of ballet dancers competing in the IFBB European competition by Jack Devant, licensed under Creative Commons.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/sntEk