In this topic will see how to create auto rotate 3D images with the help of pure css. This is one of the simple concept and easy to create we can use it to the gallery page for better view for the images. And also this is very attractive animation effect with pure css. Now will see how to create this effect.This concept is to rotate multiple images in the 3d effect without using any jquery and javascript. This will done by using pure css3 code. and we can use n number of images to in this concept by reducing the transform deg.
For carousel id we can set the following important css3 code like below to animate rotate effect
transform-style: preserve-3d;
animation: rotation 20s infinite linear;
Then set the transform degree for each image with 40 degree difference between each images like below
#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);}
#carousel figure:nth-child(10){ transform: rotateY(360deg)translateZ(288px);}
then set the keyframe rotation from 0deg to 360deg . This all are very important points to be noted. Please check the below demopage to view the auto rotate 3d gallery images. And download the code from here and use it to your website. We can use this types of animation in gallery pages for our website. I hope this is very useful to you.
Css for 3d rotate image:
.gallery{
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: 90%;
height: 78%;
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);}
#carousel figure:nth-child(10){ transform: rotateY(360deg)translateZ(288px);}
#carousel img{
-webkit-filter: grayscale(1);
cursor: pointer;
transition: all .5s ease;
width:100%;
}
#carousel img:hover{
-webkit-filter: grayscale(0);
transform: scale(1.2,1.2);
}
@keyframes rotation{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
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: 90%;
height: 78%;
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);}
#carousel figure:nth-child(10){ transform: rotateY(360deg)translateZ(288px);}
#carousel img{
-webkit-filter: grayscale(1);
cursor: pointer;
transition: all .5s ease;
width:100%;
}
#carousel img:hover{
-webkit-filter: grayscale(0);
transform: scale(1.2,1.2);
}
@keyframes rotation{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
Html code for 3d rotate image gallery:
<body>
<div class="div-center gallery">
<div id="carousel">
<figure><img src="p1.jpg" alt=""></figure>
<figure><img src="p2.jpg" alt=""></figure>
<figure><img src="p3.jpg" alt=""></figure>
<figure><img src="p4.jpg" alt=""></figure>
<figure><img src="p5.jpg" alt=""></figure>
<figure><img src="p6.jpg" alt=""></figure>
<figure><img src="p1.jpg" alt=""></figure>
<figure><img src="p2.jpg" alt=""></figure>
<figure><img src="p3.jpg" alt=""></figure>
<figure><img src="p4.jpg" alt=""></figure>
</div>
</div>
</body>
<div class="div-center gallery">
<div id="carousel">
<figure><img src="p1.jpg" alt=""></figure>
<figure><img src="p2.jpg" alt=""></figure>
<figure><img src="p3.jpg" alt=""></figure>
<figure><img src="p4.jpg" alt=""></figure>
<figure><img src="p5.jpg" alt=""></figure>
<figure><img src="p6.jpg" alt=""></figure>
<figure><img src="p1.jpg" alt=""></figure>
<figure><img src="p2.jpg" alt=""></figure>
<figure><img src="p3.jpg" alt=""></figure>
<figure><img src="p4.jpg" alt=""></figure>
</div>
</div>
</body>
0 Comments