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.
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.
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
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.
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.
: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 Pen “Rotate-on-Hover” 3D Gallery using CSS3 transforms by Iván Melgrati (@imelgrat) on CodePen.
Pictures courtesy of Luis Bello