Unfolding 3D Thumbnails Concept

Mary Lou wants to share a little 3D concept for an image slideshow (or similar) with you. The idea is to reveal thumbnails using a neat effect: the current image will be opened in the middle and the thumbnails view will unfold in 3D. 3D is absolutely in right now. With CSS 3D transforms she can explore new ways of playing with space and create depth and realism to normally flat elements.

For this effect Mary Lou wants to have a simple initial structure, a structure that might be used in an image slideshow. This structure will get transformed, so that she can create the 3D animation. The divisions with the class th-part will be the parts that will animate. Each one of the parts will have a height of half of the whole wrapper (150 pixels). Of course, she’ll need to add some transitions to the respective elements. The first transition is for all the parts, but then she’ll redefine the timing functions for some cases so that she has a smooth experience. The key here is to understand that the transition defined for the th-part class will be applied when the thumbnail view closes, since Mary Lou has a redefined transition for the active one.