3D Lightbox animation image gallery with CSS3

The animations provided in CSS3 are among the powerful features of this scripting language and have considerably enhanced the facility and ease of web development. In this tutorial, we would create an image gallery using 3D Lightbox animation by adding a few hover effects for the gallery grid itself and a 3D rotation for the Lightbox content, all with the use of CSS3.

First, let’s look at how the Lightbox actually appears without JavaScript and only CSS with the use of the :target pseudo-class. If you’re writing CSS, you’re already using pseudo-classes as you’ll be familiar with :hover, :visited and :active.

You can link directly to a place on a page by adding a page anchor (#) with the ID of an element to the end of the URL:

http://url.com/#info1

You probably already knew that but what you may not know that you can affect the style of the element that is linked to via the :target pseudo-class. The following code would only be seen if a user clicks on a link with the target ID in:

Pretty standard CSS is then used to display the Lightbox on the page, even with a dark transparent overlay through the use of opacity.

If we leave it at that, it’s pretty much the same as a standard Lightbox or modal window so we’ll set it apart with a fun animation. Here is how we’ve created the animation with the help of key frames:

On its own, the code above won’t do anything so we need to reference it against the element(s) we want to animate.

As you can see, the animation is called Lightbox and that’s the first part of the animation property, followed by the duration and the timing function.

It’s very simple. We’re telling the div to transform 5 times bigger with scale (5) and from a rotated position of -270 degrees with rotateY(-270deg). Then when the animation ends after 0.75s we want it to reset to its actual size and rotation. The browser will create the animation in between (which is affected but the cubic-bezier timing function above).