Responsive Image Lightbox with 3D Animation Effects using CSS3 Transitions without Java Script
The goal of this article is to demonstrate an example of a responsive image lightbox with a minimal amount of HTML and CSS code. The lightbox comes with 12 animation effects that are all shown in a demonstration. The example uses only CSS3 and works without JavaScript.
Previously, this lightbox was considered and demonstrated in the article used it for 2D animation effects. This time, however, an example with 3D animation effects will be shown.
There is no need to restate the primary reason for using CSS3 instead of JavaScript, since it was mentioned and fully described in the previous article.
Working Principle
Operation principle of the image lightbox is based on using two features of CSS3:
- The target selector that is used for showing/hiding the image lightbox when a certain link/button is clicked.
- The transition property that is used for creating a smooth animation.
HTML structure
Open lightbox
As can be seen above, the HTML code of the image lightbox is very simple. The only thing that should be paid attention to is the your-lightbox-identifier
identifier. The identifier must be unique for every lightbox on a webpage.
Base Styles
.lightbox, .lightbox * { box-sizing: border-box; } .lightbox { position: fixed; z-index: 999; top: 15px; left: 15px; bottom: 15px; right: 15px; text-align: center; visibility: hidden; } .lightbox:before { content: ""; position: absolute; top: -15px; left: -15px; bottom: -15px; right: -15px; transition: all 500ms ease-out; } .lightbox img { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 20px black; border: 5px solid white; max-width: 100%; max-height: 100%; } .lightbox:target { visibility: visible; } .lightbox:target:before { background-color: rgba(255, 255, 255, 0.85); } .lightbox:target:before { background-color: rgba(255, 255, 255, 0.85); } .lightbox .close { display: block; position: absolute; right: 0; top: 0; width: 32px; height: 32px; background: black; box-shadow: 0px 0px 5px white; } .lightbox .close:before, .lightbox .close:after { left: 0; right: 0; top: 0; bottom: 0; content: ""; position: absolute; display: block; margin: auto; width: 32px; height: 0; border-top: 2px solid white; transform-origin: center; } .lightbox .close:before { transform: rotate(45deg); } .lightbox .close:after { transform: rotate(-45deg); }
The styles above are basic for the image lightbox. They build everything except an animation.
Animation Styles
This article provides examples of 3D animation effects that are divided into groups according to an animation effect similarity.
Flip Left/Right/Up/Down/Up & Left/Up & Right/Down & Left/Down & Right
The following styles add the animation effect:
.lightbox.flip-left-3d img, .lightbox.flip-right-3d img, .lightbox.flip-up-3d img, .lightbox.flip-down-3d img, .lightbox.flip-up-left-3d img, .lightbox.flip-up-right-3d img, .lightbox.flip-down-left-3d img, .lightbox.flip-down-right-3d img { transition: all 500ms ease-out; } .lightbox.flip-left-3d img { transform: translate(-50%, -50%) perspective(1000px) rotateY(90deg); } .lightbox.flip-left-3d:target img, .lightbox.flip-right-3d:target img { transform: translate(-50%, -50%) perspective(1000px) rotateY(0deg); } .lightbox.flip-right-3d img { transform: translate(-50%, -50%) perspective(1000px) rotateY(-90deg); } .lightbox.flip-up-3d img { transform: translate(-50%, -50%) perspective(1000px) rotateX(-90deg); } .lightbox.flip-up-3d:target img, .lightbox.flip-down-3d:target img { transform: translate(-50%, -50%) perspective(1000px) rotateX(0deg); } .lightbox.flip-down-3d img { transform: translate(-50%, -50%) perspective(1000px) rotateX(90deg); } .lightbox.flip-up-left-3d img { transform: translate(-50%, -50%) perspective(1000px) rotateX(-90deg) rotateY(90deg); } .lightbox.flip-up-left-3d:target img, .lightbox.flip-up-right-3d:target img, .lightbox.flip-down-left-3d:target img, .lightbox.flip-down-right-3d:target img { transform: translate(-50%, -50%) perspective(1000px) rotateX(0deg) rotateY(0deg); } .lightbox.flip-up-right-3d img { transform: translate(-50%, -50%) perspective(1000px) rotateX(-90deg) rotateY(-90deg); } .lightbox.flip-down-left-3d img { transform: translate(-50%, -50%) perspective(1000px) rotateX(90deg) rotateY(90deg); } .lightbox.flip-down-right-3d img { transform: translate(-50%, -50%) perspective(1000px) rotateX(90deg) rotateY(-90deg); }
The HTML code to demonstrate the animation effect:
Flip left Flip right Flip up Flip down Flip up & left Flip up & right Flip down & left Flip down & right
Swinging Sign with Top/Bottom/Left/Right Bar
The following styles add the animation effect:
.lightbox.swinging-sign-top-bar-3d img, .lightbox.swinging-sign-bottom-bar-3d img, .lightbox.swinging-sign-left-bar-3d img, .lightbox.swinging-sign-right-bar-3d img { transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .lightbox.swinging-sign-top-bar-3d img { transform: translate(-50%, -50%) perspective(1000px) rotateX(-90deg); transform-origin: 50% 0; } .lightbox.swinging-sign-top-bar-3d:target img, .lightbox.swinging-sign-bottom-bar-3d:target img { transform: translate(-50%, -50%) perspective(1000px) rotateX(0deg); } .lightbox.swinging-sign-bottom-bar-3d img { transform: translate(-50%, -50%) perspective(1000px) rotateX(90deg); transform-origin: 50% 100%; } .lightbox.swinging-sign-left-bar-3d img { transform: translate(-50%, -50%) perspective(1000px) rotateY(90deg); transform-origin: 0 50%; } .lightbox.swinging-sign-left-bar-3d:target img, .lightbox.swinging-sign-right-bar-3d:target img { transform: translate(-50%, -50%) perspective(1000px) rotateY(0deg); } .lightbox.swinging-sign-right-bar-3d img { transform: translate(-50%, -50%) perspective(1000px) rotateY(-90deg); transform-origin: 100% 50%; }
The HTML code to demonstrate the animation effect:
Swinging sign with top bar Swinging sign with bottom bar Swinging sign with left bar Swinging sign with right bar
Continue reading here: How to add custom fonts to a website using @font-face in CSS
Was this article helpful?