Creating 3D Image Folders Using CSS3

Jan 11, 2013

Creating 3D Image Folders Using CSS3

If you've ever watched Minutes to Win It, you may have noticed the animation of showing how much money the participant may get. Inspired by that animation, I created this 3D image folder effect using CSS3. This effect is useful because

  1. it provides the user with a new way to browser different photo albums, which can be used in most photo sharing websites or photo editing softwares such as Flickr or iPhoto;
  2. it encourages the user to explore the content of the image folders and can increase their engagement with the webpage or the software.

Features and Usage

  • The developer can create multiple image folders. Each folder can have multiple images. The last image will be the cover for its folder.
  • When the user hovers over the cover image, the image folder will show up. The user can then hover over the images in the folder.
  • When an image is hovered over in the folder, it will shift upward or rightward to allow the user to check it out more carefully.
  • When an image (including the cover image) is clicked in the folder, the image will be taken from the folder and the whole image will be shown.
  • When the user hovers away from the folder, all the images will go back to the folder, and the folder will be closed.

Known Issues

  • Firefox cannot render this demo smoothly.
  • This demo does not support tablet devices at the moment.

Notes

  • Images will shift upward in Demo1 and rightward Demo2.
  • This demo works best in Webkit browsers and IE10.

Leave a Reply

*