Responsive 3D Panel Layout

A responsive layout experiment where we arrange panels in a grid-like structure and transition the elements with 3D effects.
Responsive 3D Panel Layout

Today we want to share a creative grid layout with you. The layout will contain slides where each one consists of up to four panels. When navigating through them, we’ll animate some separation lines (the “grid”), adjusting the size of the next slide’s panels. The panels will appear with a 3D effect which we will define for each panel.

Please notice that this is very experimental. It will only work as intended in browsers that support the new CSS properties used here. It was tested in the latest versions of Safari, Chrome, Safari Mobile and Firefox (not as smooth though).

Some of the jQuery plugins used for this:

The placeholder text is from Veggie ipsum.

An example for the HTML structure is the following:

<ul id="sg-panel-container">
	<li data-w="60" data-h="55">
		<img title="Grexit" src="images/1.jpg" data-rotate-x="50" />
		<img title="Godwottery" src="images/2.jpg" data-rotate-y="-50" />
		<img title="Somniloquent" src="images/3.jpg" data-rotate-x="50" data-translate-z="-700" />
		<img title="Etiquette" src="images/4.jpg" data-translate-z="250" />
	<li data-w="50" data-h="100">
		<img title="Somniloquent" src="images/3.jpg" data-rotate-x="50" data-translate-z="-700" />
			<div class="sg-content">
				<h3>Proinde vos postulo</h3>
				<p>Veggies sunt bona vobis, proinde...</p>
	<!-- ... -->

The first slide, which is a list item, will contain four images in this example. The data attributes data-w and data-h define the width and height (in percentage) of the first image or element. Since we have a maximum of four items in each li, we know the other panels’ widths and heights by knowing the values of the first one. We can also just add 2 elements, like in the second slide. The values for the width and height should be chosen according to the desired layout of the panels. In this second slide, we say that the first element, which is a picture, will have 50% of width and 100% of height, leaving the rest of the space to the content area.

Each element/image can have a data attribute for the transition effect. The following attributes can be used:

  • data-rotate-x
  • data-rotate-y
  • data-rotate-z
  • data-translate-x
  • data-translate-y
  • data-translate-z

The structure that we will create dynamically is the following:

<div class="sg-wrapper">
	<div class="sg-box sg-box-1">
		<div class="sg-panel">
			<div style="background-image: url(images/1.jpg);">
	<div class="sg-box sg-box-2" style="width: 40%; height: 55%; left: 60%; ">
		<!-- ... -->
	<!-- ... -->

Each image or element will be wrapped in a division with the class sg-box. The title of the image becomes an h2 and the image itself will be used as background image of a inner division of the sg-panel division. Additionally, the boxes will have the respective style (width, height, transforms and transitions).

The background images will have the style background-size: cover which will make them cover the whole panel.

To call the plugin, simply do:

$(function() {
	$( '#sg-panel-container' ).gridgallery();


Don’t forget to include the other scripts that are needed. Check out the files to see how it can be used.

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 49

Comments are closed.
  1. you guys are amazing. i’ve learned alot from you guys. sendingyou some love!

  2. Wonderful project. But it still has issues with latest firefox. Any update or fix?


  3. Hi, i just want to say! WOW !!! what a nice gallery.

    And also have one question. theres any way to call a especific slide whit a link ?

    Thank you very much

    • Hi, I am also interested in adding a link on the slides. Please let me know to rearrange jquery.gridgallery.js to implement this feature.


  4. Hi,

    I’m trying to integrate Responsive 3D Panel Layout in your flipboard page layout.
    The panel is displaying in
    Panel is displayed (full screen) on click on a box flipboard but navigation immediately closes the box (on rollOver on sg-dot) and I can not move from slide to slide. Have you got an idea ?

  5. Hi Mary Lou ,

    +1 on making it autoplay ? In such case I would recode it for a screensaver replacement on my xbmc HTPC.


  6. Great work! Thank you for sharing 🙂

    I was wondering if there is a way to change navigation dots with navigation links?

    All Best!

  7. I got rid of the Firefox hang by editing line 361 of jquery.gridgallery.js:

    $wrapper.doTimeout( 1, function() {

    $wrapper.doTimeout( 50, function() {

    50 is just a small value I tried out. don’t know if it’s a smart solution, but it works.

  8. first of all, really nice stuff.
    i have a problem for using this as i only need the grid lines that adjust according to the size ( scalable) of my divs but the gridgallery.js converts my pages to something i don’t want , so can you please make a tutorial form creating the grid lines according to our needs 🙂
    thank you

  9. Having trouble with information panels… do not scroll on mobile web browser even with overflow-y: scroll;


  10. This slideshow is probably the best, anyway, I’m trying to figure out how to handle keyboard events ? Some body could help me ?


  11. Hi, i’m using the gallery but in one case i want only to show one , but in that case dont load the first (only li in that case)…