This project is helpful for creating a 3D image gallery with 360-degree rotation. It uses CSS 3D transformation to its figures using transform-style: preserve-3d and the transform property. The animation property specifies the rotation animation of the carousel, and the animation-play-state property changes the animation’s state to “paused” when the carousel hovers over.
How to Create a 3D Image Gallery with 360-degree Rotation
First of all, load the prefixfree JS by adding the following CDN link into the head tag of your HTML document.
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
After that, create the HTML structure for 3D image gallery as follows:
<h1>3d images gallery</h1> <div class="container"> <div id="carousel"> <figure><img src="http://lorempixel.com/186/116/nature/1" alt=""></figure> <figure><img src="http://lorempixel.com/186/116/nature/2" alt=""></figure> <figure><img src="http://lorempixel.com/186/116/nature/3" alt=""></figure> <figure><img src="http://lorempixel.com/186/116/nature/4" alt=""></figure> <figure><img src="http://lorempixel.com/186/116/nature/5" alt=""></figure> <figure><img src="http://lorempixel.com/186/116/nature/6" alt=""></figure> <figure><img src="http://lorempixel.com/186/116/nature/7" alt=""></figure> <figure><img src="http://lorempixel.com/186/116/nature/8" alt=""></figure> <figure><img src="http://lorempixel.com/186/116/people/9" alt=""></figure> </div> </div>
Style using the following CSS styles:
@import url(https://fonts.googleapis.com/css?family=Anaheim);
*{
margin: 0;
padding: 0;
outline: none;
border: none;
box-sizing: border-box;
}
*:before,
*:after{
box-sizing: border-box;
}
html,
body{
min-height: 100%;
}
body{
background-image: radial-gradient(mintcream 0%, lightgray 100%);
}
h1{
display: table;
margin: 5% auto 0;
text-transform: uppercase;
font-family: 'Anaheim', sans-serif;
font-size: 4em;
font-weight: 400;
text-shadow: 0 1px white, 0 2px black;
}
.cd__main{
display: block !important;
}
.container{
margin: 4% auto;
width: 210px;
height: 140px;
position: relative;
perspective: 1000px;
}
#carousel{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: rotation 20s infinite linear;
}
#carousel:hover{
animation-play-state: paused;
}
#carousel figure{
display: block;
position: absolute;
width: 186px;
height: 116px;
left: 10px;
top: 10px;
background: black;
overflow: hidden;
border: solid 5px black;
}
#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
img{
-webkit-filter: grayscale(1);
cursor: pointer;
transition: all .5s ease;
}
img:hover{
-webkit-filter: grayscale(0);
transform: scale(1.2,1.2);
}
@keyframes rotation{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
Code Explanation
The container class defines the size and position of the carousel, and sets the perspective for the 3D transformation. The carousel ID is positioned absolutely within the container and uses 3D transformations to create the carousel effect.
Each figure element within the carousel ID represents an image in the carousel and is positioned using the transform property with a combination of rotateY and translateZ to place each image in a circular path. The nth-child pseudo-class is used to target each individual image in the carousel and apply the appropriate transform.
The img elements within the figure elements are styled with a grayscale filter and a cursor pointer. On hover, the grayscale filter is removed and the image is scaled up slightly.
The rotation keyframe animation is used to continuously rotate the carousel 360 degrees on the Y-axis over a duration of 20 seconds. When the mouse hovers over the carousel, the animation is paused using the animation-play-state property set to paused.
That’s all! hopefully, you have successfully created a 3D image gallery with 360-degree rotation. If you have any questions or suggestions, feel free to comment below.
