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?

0 0