There are many galleries that make use of CSS3 transforms nowadays. They bring all sorts of effects to attract attention to pictures and, eventually, invite viewers to visit other pages, subscribe to a blog, etc. This is a simple CSS3 3D gallery showing the conversion of an image into a realistic 3D cuboid when hovering over it. The CSS includes a shadow and blurring effect to make the perspective and rotation of the pictures more realistic.

CSS3 transforms

Around 2009, the The World Wide Web Consortium (W3C) began working on CSS transforms as a means of allowing DOM elements to perform actions such as scaling, rotating and entering into perspective.

Browser adoption was slow and disparate at first but they are becoming almost identical now. This allows developers to use transforms without fearing weird layouts or having to resort to JavaScript.

Getting started

We first need to make sure our gallery will adapt to all screen sizes, so we create a picture container (gallery-picture) setting it a 25% width of the current screen. We also need to make sure its width is at least 300px (so that the picture always fits smaller screens).


Modeling the 3D-cuboid pictures

Inside each container (.thumb class div), we add an anchor (used for interaction) and a span (used to hold the picture’s text). Using CSS me add a different background to each picture. These backgrounds are also used for the cuboids’ bottom side (where the item’s text is shown, created using its :after pseudoelement).

The magic begins when CSS3 transforms are used to rotate both the cuboid and its bottom. An 80-degree rotation is performed, as well as a perspective transform to provide a far-away vanishing point. This way, pictures look as if they were lying down on the page. A preserve-3d transform style was set to the container to preserve its children’s 3D position.

Shadows

In this example, shadows are used to enhance the 3-D look. The bottom surface of the cuboid is made using a pseudo element which inherits the background image of the thumbnail and is positioned perpendicularly to create the 3D box effect.

The :before pseudoelement has a translucent background and box-shadow styles to create a blurred dark shadow for the cuboid. Though the CSS blur filter provides better control and visuals for the shadow, we stick to box-shadow because of the uneven support for CSS3 filters in most browsers.

Waking up pictures

When cuboids are hovered upon, they seem to “wake up” and come to the front, free from their rotation. This is easily accomplished by changing the elements’ rotation angles to zero. This also rotates the :after element forcing picture titles to hide, as they are rotated 90 degrees from the picture).

Finally, we use CSS3 transitions to make the whole process smooth. And there you have it! A 3-D picture gallery using only CSS.

See the working demo”Rotate-on-Hover” 3D Gallery using CSS3 transforms by Iván Melgrati (@imelgrat) on CodePen.10855

Pictures courtesy of Luis Bello

Summary
“Rotate-on-Hover” 3D Gallery using CSS3 transforms
Article Name
“Rotate-on-Hover” 3D Gallery using CSS3 transforms
Description
This is a simple CSS3 3D gallery showing the conversion of an image into a realistic 3D cuboid when hovering over it. The CSS includes a shadow and blurring effect to make the perspective and rotation of the pictures more realistic.
Author
Publisher Name
Iván Melgrati
Publisher Logo