Hello guys today we will create 3D cube box using html & css
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html> <html> <head> <title>3D Cube</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="cube"> <!-- You can use any images --> <div class="box box1"> <img src="img/01.jpg"> </div> <div class="box box2"> <img src="img/02.jpg"> </div> <div class="box box3"> <img src="img/03.jpg"> </div> <div class="box box4"> <img src="img/04.jpg"> </div> <div class="box box5"> <img src="img/05.jpg"> </div> <div class="box box6"> <img src="img/06.jpg"> </div> </div> </body> </html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #fcfcfc;
}
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: rotate 10s linear infinite;
animation-direction: reverse;
}
@keyframes rotate {
0%,100% {
transform: rotate(0deg);
}
20% {
transform: rotateY(90deg) rotateZ(90deg);
}
40% {
transform: rotateY(180deg) rotateZ(-90deg);
}
60% {
transform: rotateY(270deg) rotateZ(90deg);
}
80% {
transform: rotateY(360deg) rotateZ(-90deg);
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.9;
}
.box.box1 {
transform: translateZ(100px);
}
.box.box2 {
transform: rotateY(90deg) translateX(100px);
transform-origin: right;
}
.box.box3 {
transform: rotateY(180deg) translateZ(100px);
}
.box.box4 {
transform: rotateY(-90deg) translateX(-100px);
transform-origin: left;
}
.box.box5 {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top;
}
.box.box6 {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom;
}