3d items quick view featured
July 22, 2014 | 20 Feedbacks

3D Items Quick View

A simple 3D animation for your gallery items, to make it easy for users to discover more about your products without having to leave the page.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

The idea behind this resource is: if I have a gallery of products, I’m gonna pick the best image for each one of them. But what if one image is not enough? The client clicks on the product, he/she goes to the single product page, and, in most cases, they’ll find a slideshow there. However, if they could see more images of the same product before moving to the product page, there’d be more probabilities to drive them to what they really wanna buy. So we created a CSS3 and jQuery powered slider for each item of the gallery, hidden by default and triggered by the :hover selector on no-touch devices and a tap on touch devices.

About IE9: even though the 3D effect and the slider won’t be visible, the gallery will work just fine.

Of course there can be other uses for this code snippet. Feel free to experiment!

Creating the structure

The main structure is an unordered list. Each list items contains a nested unordered list.  In addition to the nested unordered list (the 3+ product images) we needed some other elements: the product info (title and price), the navigation (2 arrows to navigate between preview images) and the 3D effect trigger (visible on mobile only, where we can’t use the hover effect as trigger).

Adding style

To create the 3D effect we used CSS3 3D transformations. For the 3D effects to work we need to set a perspective value to the parent element (the nested unordered list). We declared 4 classes for the list items: .cd-item-front, .cd-item-middle and .cd-item-back for the first 3 list items, while the class .cd-item-out is used for all the other (not visible) list items – in case you want to add more images.

Note that the second value passed to the perspective-origin property (Y axis) is negative. This way, when we push the list items along the Z axis, they are visible on top of the frontal list item.

3d effect animation

On no-touch devices, to trigger the 3D effect all we need is the hover selector:

On touch devices, instead, we use the class .active triggered by a tap on the .cd-3d-trigger anchor tag.

Finally we need 2 more classes to handle the slide-out effect of the frontal list item. We use li.move-right to push out the item, and li.hidden to hide it at the end of the transition (with some jQuery help):

Events handling

We defined two functions to control the navigation appearance: updateNavigation() and hideNavigation():

On no-touch devices, we use the hover event to toggle the slider navigation visibility; on touch devices, instead we use the click event on the .cd-3d-trigger anchor tag.

When user taps on the slider navigation, we change the classes assigned to the .cd-item-wrapper li elements to create the 3D slide effect.



July 22, 2014
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • http://soyg.us/ G. Andrés Ibarra

    I love this effect! I may implement it for an e-commerce project. BTW cody is a great inspiration for me, not only on the designs and effects but in the code. You use good practices on JS.

    • http://codyhouse.co/ Sebastiano Guerriero

      Thanks @gandresibarra:disqus ;)

  • Daniel

    Hi !

    Very good work and keep it up !

    Also I have some questions :

    1. Why you add the crearfix after the cd-container class ?
    2. Why you set the width: 100% and the display: block on the #cd-gallery-items > li img ? What it’s the difference with it and without it ?
    3. I see that you use the “Force Hardware Acceleration in WebKit”, and I know that it is used for better rendering perforamnce in browser. But why without this, that animation on hover isn’t the same with it ? And when to use it ?

    • http://codyhouse.co/ Sebastiano Guerriero

      hey @disqus_pr91aY9nUX:disqus

      1) the .cd-container often has floated elements inside (if you’re using SASS you can see we created the column mixin which works in combination with the .cd-container class)
      2) width 100% so the image has the same width of the list item. Display:block for images removes a small gap at the bottom (try without to see the difference)
      3) Use it when you’re dealing with CSS animations, transitions and transformations to smooth their rendering

      • Daniel

        Thanks a lot !

  • vcastrejon

    Very good, I will like to implement this as a way to show more pictures of the same product in a catalog list

  • James Wong

    it is material design concept!

    • Jack Francis Dalton

      Everything I’ve seen so far screams of material design tropes. All of it is great!

  • http://batescreative.com/ Bates Creative

    I can see a lot of use for this approach Sebastiano, thanks dude. Now lets get the old folks play nicely with it at one point.

  • https://twittstrap.com/ twittstrap

    Hi Sebastiano,
    We love how you write the tutorial very clean job.

  • handoyo

    Thanks a lot for the tutorial

  • Faizal Ridho Tijan

    Thank’s a lot bro.

  • reelofthoughts

    Is there a way I can prevent the box’s photo from determining the height of the box, while maintaining the aspect ratio? I’ve tried a few things, but can’t figure it out.

    • http://codyhouse.co/ Sebastiano Guerriero

      Unfortunately I don’t think there’s a way to prevent box’s ratio without using an image. Unless you wanna set height in jQuery (bit too extreme IMO).

  • Dave Schroeder

    Would there any way to achieve this effect when dealing with a dynamically populated list (IE: an array)? I noticed you have classes on each li but if a list is dynamically populated then you really can’t go that route.

    • http://codyhouse.co Claudia Romano

      Hi Dave, actually we assign a specific class only to the first 3 elements (all the others have the same cd-out class) so it shouldn’t be too difficult even for dynamically populated lists.

  • Juned Fakir

    hi.Thankyou so much…. i saw your all event in this website i m very impressed….i love it……Thanks……

  • Victory Matibiri

    great stuff! thanks a bunch

  • Billy

    Awesome tutorial, can I ask what the clothes icons used in the demo are?

  • Hernan Gil

    Awesome tutorial Sebastiano! Thanks a lot!