Bouncy content filter using CSS and HTML

This space-saving content filter allows the users to switch from one category to the other in a fancy way! Each click fires the rotation of the gallery images, revealing the items belonging to the selected category.

Content filters are particularly useful for big websites, where each pixel counts. Lets say you are showing the “last products” of your e-commerce. How about giving the users the option to switch to the “most popular” products without a page refresh? A good solution could be to hide the “most popular” items right behind the “last products”, then use the power of CSS3 3D Transforms to rotate the items when the user switches from one option to the other. The bounce effect is optional, but you get the idea! The rotation won’t work on older browsers like IE9, but the experience won’t be broken – just a display on/off with no transitions. Lets dive into the code!

Creating the structure

We wrapped the filter into a <nav> element. Continue reading

Advertisements