How to Create Triple Cube 3D Animation Using HTML & CSS
How to Create Triple Cube 3D Animation Using HTML & CSS
Have you ever wanted to create a stunning 3D animation using only HTML and CSS? Look no further! In this tutorial, we will learn how to create a triple cube 3D animation that will take your web design skills to the next level.
First, let's start by creating the HTML structure of our triple cube. We will use three <div> elements, each representing a face of the cube, and wrap them inside a container <div>. Here's the code for the
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cube">
<div class="topD"></div>
<div>
<span style="--i:0"></span>
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
</div>
<div class="cube2">
<div>
<span style="--i:0"></span>
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
</div>
<div class="cube3">
<div class="top3"></div>
<div>
<span style="--i:0"></span>
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
-------
Next, let's use CSS to apply the 3D transformations that will give our cubes depth and perspective. We will use the transform property with the rotateX, rotateY, and rotateZ functions to achieve the desired effect. Here's the
CSS code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #000d0d;
width: 100%;
height: 80vh;
}
.cube {
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
transform: rotateX(-30deg);
animation: animateD 8s linear infinite;
}
@keyframes animateD {
0% {
transform: rotateX(-15deg) rotateY(0deg);
}
100% {
transform: rotateX(-15deg) rotateY(-360deg);
}
}
.cube div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.cube div span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
border: 2px solid #7dff99;
transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
}
.topD {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: transparent;
border: 2px solid #7dff99;
transform: rotateX(90deg) translateZ(150px);
}
.topD::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: transparent;
border: 2px solid #7dff99;
transform: translateZ(-400px);
filter: blur(30px);
box-shadow: 0 0 120px rgba(125, 255, 153, 0.2),
0 0 200px rgba(125, 255, 153, 0.4), 0 0 300px rgba(125, 255, 153, 0.6),
0 0 4000px rgba(125, 255, 153, 0.8), 0 0 500px rgba(125, 255, 153, 1);
}
.cube2 {
position: relative;
width: 150px;
height: 150px;
transform-style: preserve-3d;
animation: animateD2 5s ease-out infinite alternate;
}
@keyframes animateD2 {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(180deg) rotateY(-360deg);
}
}
.cube2 div {
position: absolute;
top: 35px;
left: 0;
width: 65%;
height: 65%;
transform-style: preserve-3d;
}
.cube2 div span {
position: absolute;
top: 20%;
left: 20%;
width: 65%;
height: 65%;
background: transparent;
border: 2px solid #7dff99;
transform: rotateY(calc(90deg * var(--i))) translateZ(62px);
}
.cube3{
position: absolute;
width: 300px;
height: 300px;
transform-style: preserve-3d;
transform: rotateX(-30deg);
animation: animateD3 1s ease-in-out infinite alternate;
}
@keyframes animateD3 {
0% {
transform: rotateX(-90deg) rotateY(0deg);
}
100% {
transform: rotateX(90deg) rotateY(45deg);
}
}
.cube3 div {
position: absolute;
top: 70px;
left: 70px;
width: 15%;
height: 15%;
transform-style: preserve-3d;
}
.cube3 div span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #7dff99;
transform: rotateY(calc(90deg * var(--i))) translateZ(14px);
box-shadow: 0px 0px 7px #7dff99;
}
.top3 {
position: absolute;
top: 0;
left: 0;
background: #7dff99;
transform: rotateX(90deg) translateZ(14px);
box-shadow: 0px 0px 10px #7dff99;
}
----------
Here, we set the perspective property on the container to give the illusion of depth. We also set the transform-style property to preserve-3d, which ensures that the cubes remain in their 3D space even when they're animated. We use the translateZ function to move the front face of the cube forward, and the rotateX, rotateY, and rotateZ functions to rotate the cube around different axes.
Finally, we use the @keyframes rule to create an animation that makes the cubes spin and rotate continuously.
And that's it! With just a few lines of code, we've created a beautiful triple cube 3D animation using only HTML and CSS. You can check out a live demo of the animation here.
In conclusion, learning how to create 3D animations using HTML and CSS can take your web design skills to new heights. By following this tutorial and experimenting with different transformations and animations, you can create stunning visuals that will impress your users and make your website stand out from the crowd.
We hope you found this tutorial helpful. If you have any questions or comments, feel free to leave them below!
Comments
Post a Comment