Front
Back
Left
Right
Top
Bottom
This is the demo of the 3D animated cube where we can control all sides of the cube, such as X-axis, Y-axis, Z-axis, color of the cube, opacity of the cube, rotation axis, rotation time and we can also upload an image file on each side of the cube.
To create a 3D Animated cube using HTML and CSS, you can use the following steps:
1) Create a div container:
2) Create a div container for the cube:
<div class="container">
<div class="cube">
<div class="side front">Front</div>
<div class="side back">Back</div>
<div class="side left">Left</div>
<div class="side right">Right</div>
<div class="side top">Top</div>
<div class="side bottom">Bottom</div>
</div>
</div>3) Style the div container & cube container with the following CSS code:
.container{
width: 100%;
min-height: 100vh;
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center;
perspective: 800px;
}
.cube{
width: 200px;
height: 200px;
position: absolute;
transform-style: preserve-3d;
animation: 5s spin linear infinite;
}4) Style each side of the cube with the following CSS code:
.side{
width: 200px;
height: 200px;
position: absolute;
border: 1px solid black;
text-align: center;
line-height: 200px;
color: white;
font-weight: 900;
opacity: 0.5;
}
.front{
transform: translateZ(100px);
background-color: red;
}
.back{
transform: rotateX(-180deg) translateZ(100px);
background-color: green;
}
.left{
transform: rotateY(-90deg) translateZ(100px);
background-color: blue;
}
.right{
transform: rotateY(90deg) translateZ(100px);
background-color: skyblue;
}
.top{
transform: rotateX(90deg) translateZ(100px);
background-color: black;
}
.bottom{
transform: rotateX(-90deg) translateZ(100px);
background-color: yellow;
}5) Add an Animation effect to the cube container with the following CSS code:
@keyframes spin{
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}6) Create an HTML File (index.html) and use this code.
<!DOCTYPE html>
<html>
<head>
<title>3D CUBE</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 100%;
min-height: 100vh;
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center;
perspective: 800px;
}
.cube{
width: 200px;
height: 200px;
position: absolute;
transform-style: preserve-3d;
animation: 5s spin linear infinite;
}
.side{
width: 200px;
height: 200px;
position: absolute;
border: 1px solid black;
text-align: center;
line-height: 200px;
color: white;
font-weight: 900;
opacity: 0.5;
}
.front{
transform: translateZ(100px);
background-color: red;
}
.back{
transform: rotateX(-180deg) translateZ(100px);
background-color: green;
}
.left{
transform: rotateY(-90deg) translateZ(100px);
background-color: blue;
}
.right{
transform: rotateY(90deg) translateZ(100px);
background-color: skyblue;
}
.top{
transform: rotateX(90deg) translateZ(100px);
background-color: black;
}
.bottom{
transform: rotateX(-90deg) translateZ(100px);
background-color: yellow;
}
@keyframes spin{
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="cube">
<div class="side front">Front</div>
<div class="side back">Back</div>
<div class="side left">Left</div>
<div class="side right">Right</div>
<div class="side top">Top</div>
<div class="side bottom">Bottom</div>
</div>
</div>
</body>
</html>7) Check the demo video https://youtube.com/shorts/KAqY5aQxDhs
The resulting HTML and CSS code will create a 3D animated cube with a gray background, different colors on each side of the cube and black borders. It will rotate on the x-axis and y-axis. You can modify all the styles of animation, rotation axis and sizes to suit your needs.
