Home / Articles / Programming languages / Markup languages / HTML & CSS / Responsive Image Lightbox with 3D Animation Effects using CSS3 Transitions without JavaScript

Responsive Image Lightbox with 3D Animation Effects using CSS3 Transitions without JavaScript

Responsive Image Lightbox with 3D Animation Effects using CSS3 Transitions without JavaScript
Authors: Sergey Fedus
Responsive Image Lightbox with 3D Animation Effects using CSS3 Transitions without JavaScript
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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

<a href="#your-lightbox-identifier">Open lightbox</a>

<div class="lightbox" id="your-lightbox-identifier">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>

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:

<a href="#flip-left-3d-example">Flip left</a>
<a href="#flip-right-3d-example">Flip right</a>
<a href="#flip-up-3d-example">Flip up</a>
<a href="#flip-down-3d-example">Flip down</a>
<a href="#flip-up-left-3d-example">Flip up & left</a>
<a href="#flip-up-right-3d-example">Flip up & right</a>
<a href="#flip-down-left-3d-example">Flip down & left</a>
<a href="#flip-down-right-3d-example">Flip down & right</a>

<div class="lightbox flip-left-3d" id="flip-left-3d-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox flip-right-3d" id="flip-right-3d-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox flip-up-3d" id="flip-up-3d-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox flip-down-3d" id="flip-down-3d-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox flip-up-left-3d" id="flip-up-left-3d-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox flip-up-right-3d" id="flip-up-right-3d-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox flip-down-left-3d" id="flip-down-left-3d-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox flip-down-right-3d" id="flip-down-right-3d-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>

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:

<a href="#swinging-sign-top-bar-3d-example">Swinging sign with top bar</a>
<a href="#swinging-sign-bottom-bar-3d-example">Swinging sign with bottom bar</a>
<a href="#swinging-sign-left-bar-3d-example">Swinging sign with left bar</a>
<a href="#swinging-sign-right-bar-3d-example">Swinging sign with right bar</a>

<div class="lightbox swinging-sign-top-bar-3d" id="swinging-sign-top-bar-3d-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox swinging-sign-bottom-bar-3d" id="swinging-sign-bottom-bar-3d-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox swinging-sign-left-bar-3d" id="swinging-sign-left-bar-3d-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox swinging-sign-right-bar-3d" id="swinging-sign-right-bar-3d-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>

Live demo

The following archive contains all the examples discussed above:



Read also

Animation in CSS3

Animation in CSS3

Log in or create a user account to post a comment.

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation