Hello readers, Today in this blog you’ll learn how to create 3D Animation on Image Gallery using HTML & CSS. Earlier I have shared a blog on how to create Image Slider Controls in JavaScript. And, now it’s time to create an Image Gallery with 3D Flip Animation in HTML & CSS.
As you can see in the image, there is a main preview image at the center and some side images. These side images are used to rotate the main preview image. When you click on the particular side image the main preview image will rotate with 3D visualization and show the particular clicked image. This is a program pure CSS program that means I used only HTML & CSS to create these clickable buttons/images or 3D animation.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Image Gallery with 3D Flip Animation).
Video Tutorial of 3D Flip Animation on Images
In the video, you have seen how these images rotate with 3D visualization with a button/image click. You can use this type of animation on the e-commerce website to show products. As you know, I didn’t use JavaScript or any JavaScript library to create this 3D animation. So if you’re a beginner and you know of HTML & CSS then you can also create this type of animation and use it on your websites, projects, and HTML page.
If you like this program (Image Gallery with 3D Flip Animation) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
You might like this:
Image Gallery with 3D Flip Animation [Source Codes]
To create this program (Image Gallery with 3D Flip Animation). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this gallery won’t appear. You’ve to download files from the given download button to use images also.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>3D Image Gallery Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="center">
<input type="radio" checked name="active" id="tab-1">
<input type="radio" name="active" id="tab-2">
<input type="radio" name="active" id="tab-3">
<input type="radio" name="active" id="tab-4">
<div class="sliders">
<label for="tab-1"><img src="#"></label>
<label for="tab-2"><img src="#"></label>
<label for="tab-3"><img src="#"></label>
<label for="tab-4"><img src="#"></label>
</div>
<div class="img-card">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
</div>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
height: 100vh;
text-align: center;
align-items: center;
justify-content: center;
}
.center{
position: relative;
width: 770px;
left: -70px;
perspective: 1200px;
}
.center .img-card{
position: relative;
height: 350px;
width: 400px;
transform-style: preserve-3d;
transition: transform .5s ease-in;
}
.img-card img{
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
}
.img-card img:nth-child(1){
transform: rotateX(-270deg) translateY(-175px);
transform-origin: top left;
}
.img-card img:nth-child(2){
transform: translateZ(175px);
}
.img-card img:nth-child(3){
transform: rotateX(-90deg) translateY(175px);
transform-origin: bottom center;
}
.img-card img:nth-child(4){
transform: rotateX(-180deg) translateY(350px) translateZ(175px);
transform-origin: bottom right;
}
#tab-1:checked ~ .img-card{
transform: rotateX(-90deg);
}
#tab-2:checked ~ .img-card{
transform: rotateX(0deg);
}
#tab-3:checked ~ .img-card{
transform: rotateX(90deg);
}
#tab-4:checked ~ .img-card{
transform: rotateX(180deg);
}
.sliders{
position: absolute;
display: block;
right: 0;
top: -30px;
}
.sliders label{
height: 98px;
width: 110px;
display: flex;
overflow: hidden;
cursor: pointer;
margin: 6px 0;
border: 2px solid #2d4052;
}
.sliders label:nth-child(1){
margin-top: 0;
}
label img{
height: 100%;
width: 100%;
object-fit: cover;
filter: grayscale(1);
opacity: .9;
}
label img:hover,
#tab-1:checked ~ .sliders label:nth-child(1) img,
#tab-2:checked ~ .sliders label:nth-child(2) img,
#tab-3:checked ~ .sliders label:nth-child(3) img,
#tab-4:checked ~ .sliders label:nth-child(4) img{
filter: grayscale(0);
opacity: 1;
}
input{
display: none;
}
That’s all, now you’ve successfully created an Image Gallery with 3D Flip Animation in HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
