Looking to add a touch of creativity to your website? Welcome to our latest tutorial on creating a stunning 3D Rotating Image Gallery using only CSS and HTML! Elevate your web design skills as we guide you through crafting a dynamic and visually appealing 3D Picture Gallery. No JavaScript is required! Watch now and bring your website to life with this Pure CSS technique. If you don’t love to watch and learn then you can check the source code below with explanations on how to implement it.
Step 1 – Create an HTML file name the file according to your choice in my case it is (3dimage.html). Now this HTML file will be used to give structure to our webpage and add a cube in it with images of each of the faces in the cube.
Note – Dont forget to replace the image path with your own image path in the below code
<DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>3D Cube Gallery</title>
<link rel="stylesheet" href="image.css">
</head>
<body>
<div class="cube-wrap">
<div class="cube">
<div class="front"><img src="ADD-YOUR-OWN-IMAGE-PATH" alt = "Image 1"> </div>
<div class="back"><img src="ADD-YOUR-OWN-IMAGE-PATH" alt = "Image 2"> </div>
<div class="right"><img src="ADD-YOUR-OWN-IMAGE-PATH" alt = "Image 3"></div>
<div class="left"><img src="ADD-YOUR-OWN-IMAGE-PATH" alt = "Image 4"></div>
<div class="top"><img src="ADD-YOUR-OWN-IMAGE-PATH" alt = "Image 5"></div>
<div class="bottom"><img src="ADD-YOUR-OWN-IMAGE-PATH" alt = "Image 6"></div>
</div>
</div>
</body>
</html>once you are done with the HTML check your webpage how it looks like so that its the same as you want, you can add your own additions in the HTML file.
Step 2: Now that we have the structure in the webpage, its time to style it. Here comes CSS for styling it
body {
background: #eee;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
background: #000000;
}
.cube-wrap {
width: 500px;
height: 500px;
perspective: 1000px;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotate 10s infinite linear;
}
.cube div {
width: 100%;
height: 100%;
position: absolute;
background-color: #222;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}
.front {transform: translateZ(250px);}
.back { transform: rotateY(180deg) translateZ(250px); }
.right { transform: rotateY(90deg) translateZ(250px); }
.left { transform: rotateY(-90deg) translateZ(250px); }
.top { transform: rotateX(90deg) translateZ(250px); }
.bottom { transform: rotateX(-90deg) translateZ(250px); }
@keyframes rotate{
0% { transform: rotateX(0deg) rotateY(0deg); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}
img{
width: 100%;
height: 100%;
object-fit: cover;
}
Let’s break down the CSS code step by step:
body:- Sets the background color to
#000000(black). - Hides any overflow content.
- Uses flexbox to center align and vertically align items in the body.
- Sets the height of the body to
100vh(100% of the viewport height). - Removes margin and padding from the body.
- Sets the background color to
.cube-wrap:- Defines a container for the cube.
- Sets the width and height to
500px. - Adds perspective to create a 3D effect.
.cube:- Sets the width and height to
100%of its container. - Makes the cube a 3D object by setting
transform-style: preserve-3d. - Applies a rotation animation called
rotatethat lasts for10s, repeats infinitely, and uses a linear timing function.
- Sets the width and height to
.cube div:- Defines each face of the cube as a
divelement. - Sets the width and height to
100%of the cube. - Positions the faces absolutely within the cube.
- Applies a background color and a box shadow to create a visual effect.
- Defines each face of the cube as a
- Face classes (
.front,.back,.right,.left,.top,.bottom):- Each class represents a face of the cube and uses the
transformproperty to position the face in 3D space. translateZ(250px)moves the face along the z-axis by250px.rotateYandrotateXrotate the face around the y-axis and x-axis, respectively, to position it correctly.
- Each class represents a face of the cube and uses the
@keyframes rotate:- Defines a keyframe animation called
rotate. - Starts at
0%with no rotation (rotateX(0deg)androtateY(0deg)). - Ends at
100%with a full rotation (rotateX(360deg)androtateY(360deg)).
- Defines a keyframe animation called
img:- Sets the width and height of images inside the cube to
100%to ensure they cover the entire face. - Uses
object-fit: coverto scale the image while maintaining its aspect ratio and covering the entire area of the element.
- Sets the width and height of images inside the cube to
This CSS code creates a 3D rotating cube gallery with six images on each face, providing an interactive and visually appealing display.
Don’t forget to copy the code and make changes as you wish in your editor to see the visually appealing output! Happy coding
Leave a Reply