In this tutorial, we will be showing you how to create a 3D rotating image gallery using simple HTML and CSS-animation property.
Explanation:
In this article, we have used mainly CSS variable, CSS flex, object-fit, transform-style, animation, transform and keyframes properties to perform this task. To read more about CSS keyframes properties please refer to https://www.geeksforgeeks.org/css-animations/amp/ article.
HTML: Creating structure
html
<!DOCTYPE html> < html >
< head >
< link rel = "stylesheet" href = "app.css" >
</ head >
< body >
< div class = "box" >
<!-- adding CSS variable --i -->
< span style = "--i:1;" >
< img src =
</ span >
<!-- adding CSS variable --i -->
< span style = "--i:2;" >
< img src =
</ span >
<!-- adding CSS variable --i -->
< span style = "--i:4;" >
< img src =
</ span >
<!-- adding CSS variable --i -->
< span style = "--i:5;" >
< img src =
</ span >
<!-- adding CSS variable --i -->
< span style = "--i:6;" >
< img src =
</ span >
<!-- adding CSS variable --i -->
< span style = "--i:7;" >
< img src =
</ span >
<!-- adding CSS variable --i -->
< span style = "--i:8;" >
< img src =
</ span >
<!-- adding CSS variable --i -->
< span style = "--i:9;" >
< img src =
</ span >
<!-- adding CSS variable --i -->
< span style = "--i:3;" >
< img src =
</ span >
</ div >
</ body >
</ html >
|
CSS:
css
/* Applying Global CSS */ * { margin : 0 ;
padding : 0 ;
box-sizing: border-box;
} /* Centering the content of whole body */ body { display : flex;
justify- content : center ;
align-items: center ;
min-height : 100 vh;
background : #000 ;
} /* Adding transform-style CSS property to the boxes */
.box { position : relative ;
width : 200px ;
height : 200px ;
transform-style: preserve -3 d;
animation: animate 20 s linear infinite;
} /* Adding keyframes for animation */ @keyframes animate { 0% {
transform: perspective( 1000px ) rotateY( 0 deg);
}
100% {
transform: perspective( 1000px ) rotateY( 360 deg);
}
} /* Adding CSS to all the span tags for animation */
.box span { position : absolute ;
top : 0 ;
left : 0 ;
width : 100% ;
height : 100% ;
transform-origin: center ;
transform-style: preserve -3 d;
transform:
rotateY(calc(var(--i) * 45 deg)) translateZ( 400px );
-webkit-box-reflect:
below 0px linear-gradient( transparent , transparent , #0004 );
} /* Adding object-fit CSS property to all the images */ .box span img { position : absolute ;
top : 0 ;
left : 0 ;
height : 250px ;
width : 300px ;
object-fit: cover;
} |
Final Solution:
css
<!DOCTYPE html> <html> <head>
<style>
/* Applying Global CSS */
* {
margin : 0 ;
padding : 0 ;
box-sizing: border-box;
}
/* Centering the content of whole body */
body {
display : flex;
justify- content : center ;
align-items: center ;
min-height : 100 vh;
background : #000 ;
}
/* Adding transform-style CSS
property to the boxes */
.box {
position : relative ;
width : 200px ;
height : 200px ;
transform-style: preserve -3 d;
animation: animate 20 s linear infinite;
}
/* Adding keyframes for animation */
@keyframes animate {
0% {
transform: perspective( 1000px ) rotateY( 0 deg);
}
100% {
transform: perspective( 1000px ) rotateY( 360 deg);
}
}
/* Adding CSS to all the span
tags for animation */
.box span {
position : absolute ;
top : 0 ;
left : 0 ;
width : 100% ;
height : 100% ;
transform-origin: center ;
transform-style: preserve -3 d;
transform:
rotateY(calc(var(--i) * 45 deg)) translateZ( 400px );
-webkit-box-reflect:
below 0px linear-gradient( transparent , transparent , #0004 );
}
/* Adding object-fit CSS
property to all the images */
.box span img {
position : absolute ;
top : 0 ;
left : 0 ;
height : 250px ;
width : 300px ;
object-fit: cover;
}
</style>
</head>
<body>
<div class= "box" >
<!-- Adding CSS variable --i -->
<span style= "--i: 1;" >
<img src=
</span>
<!-- Adding CSS variable --i -->
<span style= "--i: 2;" >
<img src=
</span>
<!-- Adding CSS variable --i -->
<span style= "--i: 4;" >
<img src=
</span>
<!-- Adding CSS variable --i -->
<span style= "--i: 5;" >
<img src=
</span>
<!-- Adding CSS variable --i -->
<span style= "--i: 6;" >
<img src=
</span>
<!-- Adding CSS variable --i -->
<span style= "--i: 7;" >
<img src=
</span>
<!-- Adding CSS variable --i -->
<span style= "--i: 8;" >
<img src=
</span>
<!-- Adding CSS variable --i -->
<span style= "--i: 9;" >
<img src=
</span>
<!-- Adding CSS variable --i -->
<span style= "--i: 3;" >
<img src=
</span>
</div>
</body>
</html> |
Output: