Unfolding 3D Thumbnails Concept

Today we want 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 we can explore new ways of playing with space and create depth and realism to normally flat elements.

Check out the following inspiring concepts on Dribbble:

• Pinch to unlock by Adrien Olczak
• Pinch out to unlock by Adrien Olczak
• Slide to unlock (fold out) by Craig ‘iPhaze’ Philips
• UX/iOS/UI iPhone idea with video process by Cuberto

The images used in the demos are by Angelo González and they are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License.

(Vendor prefixes will be omitted in the following, but you’ll of course find them in the files.)

For this effect we want to have a simple initial structure, a structure that might be used in an image slideshow. This structure will get transformed, so that we can create the 3D animation.

So, from the following structure

<div id="th-wrap" class="th-wrap">

	<!-- current image -->
	<img src="images/1.jpg"/>
	
	<!-- thumbnails view -->
	<div class="th-inner">
		<ul>
			<li>
				<a href="#">
					<img src="images/thumbs/1.jpg" />
				</a>
			</li>
			<li> <!-- ... --> </li>
			<li> <!-- ... --> </li>
			<li> <!-- ... --> </li>
			<!-- ... -->
		</ul>
	</div>
	
</div>

we want to create this structure:

<div id="th-wrap" class="th-wrap th-active">

	<div class="th-part"></div>
						
	<div class="th-part">
		<div class="th-inner">
			<ul>
				<!-- ... -->
			</ul>
			<div class="th-overlay"></div>
		</div>
	</div>
	
	<div class="th-part">
		<div class="th-inner" style="display: block; ">
			<ul>
				<!-- ... -->
			</ul>
			<div class="th-overlay"></div>
		</div>
	</div>
	
	<div class="th-part"></div>
	
</div>

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):

.th-wrap .th-part {
	width: 100%;
	height: 150px;
	position: relative;
	overflow: hidden;
	background: #f0f0f0;
}

The two outer ones (the ones with no content) will have the current slideshow image as background image:

.th-wrap .th-part:nth-child(1),
.th-wrap .th-part:nth-child(4) {
	background: #000 url(../images/1.jpg) no-repeat top left;
	z-index: 100;
}
.th-wrap .th-part:nth-child(4) {
	transform: translateY(-300px);
	background-position: bottom left;
}

The last one also needs to be pulled up because we want it to touch the upper one.

The second and third part will contain the th-inner division from the initial structure and we’ll rotate them in 3D:

.th-wrap .th-part:nth-child(2){
	transform-origin: center bottom;	
	transform: translateY(-150px) translateZ(-150px) rotateX(-90deg);
}

.th-wrap .th-part:nth-child(3) {
	transform-origin: center top;	
	transform: translateY(-150px) translateZ(-150px) rotateX(90deg);
}

The idea is that we duplicate the content and pull the one of the second copy up (we set a margin of -150 pixels to the th-inner div of the second one):

.th-wrap .th-part:nth-child(3) .th-inner{
	margin-top: -150px;
}

When we click on the button to toggle the view, we will add the class th-active to the wrapper:

.th-wrap.th-active .th-part:nth-child(2),
.th-wrap.th-active .th-part:nth-child(3){
	transform: translateY(-150px) translateZ(0px) rotateX(0deg);
}

.th-wrap.th-active .th-part:nth-child(1),
.th-wrap.th-active .th-part:nth-child(4){
	transform: translateY(-150px);
}

Of course, we’ll need to add some transitions to the respective elements. The first transition is for all the parts, but then we’ll redefine the timing functions for some cases so that we have 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 we have a redefined transition for the active one. So, when we open the thumbnails view, we want the 2nd and 3rd part to have a ease-in-out timing function:

.th-wrap .th-part {
	transition: all 500ms ease-out;
}

.th-wrap .th-part:nth-child(1),
.th-wrap .th-part:nth-child(4) {
	transition: all 480ms ease-in-out;
}

.th-wrap.th-active .th-part:nth-child(2),
.th-wrap.th-active .th-part:nth-child(3) {
	transition-timing-function: ease-in-out;
}

.th-wrap.th-active .th-part:nth-child(1),
.th-wrap.th-active .th-part:nth-child(4) {
	transition: all 400ms ease-in-out;
}

The tweaking of timing and timing functions depends on the translation values of the parts. If they would be narrower, the difference might be a bit less.

And that’s the important bits and pieces. In the demo we’ll have a slideshow mockup with a button that we will be able to activate. We’ll use some JS magic to add the active class to the wrapper and change the structure to the four parts with the double thumbnails content.

For browsers that don’t support the new CSS properties, we’ll simply show/hide the thumbnails view without any fancy effect.

I hope you find this concept inspiring!