The user experience on a modern website is improved by the usage of 3D elements. The two most important components of modern web pages that give them an appealing look are animation and 3D objects. These modern websites help us with getting more visitors to our website.
One of the elements that can boost the level of interaction on your website is a 3D cube. We will look at the process in this tutorial on how to build a 3D animating cube for our website using simply HTML and CSS. To make it simple for everyone to understand, we are going to build it step by step.
Prerequisites
Make sure you have a basic understanding of HTML and CSS before we start the course. Now for creating a 3D cube, you’ll need a web browser for the testing and a coding editor like Visual Studio for coding. Let’s get going!
Step 1: Setting Up the HTML Structure
Let’s start by setting up the basic HTML structure of our 3D cube. Add the following code to a new HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Cube</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face right">Right</div>
<div class="face left">Left</div>
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
</div>
</body>
</html>
In this code, we’ve created a simple HTML structure with an <div> element that represents our 3D cube. Inside the cube, we have six <div> elements, each representing the face of the cube.
HTML Output:
Step 2: Styling the Cube
Let’s now style our cube by adding some CSS. As explained above, make a new file called styles.css and link to it in the HTML file. Add the CSS code described below:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.cube {
perspective: 800px;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: spin 5s infinite linear;
}
.face {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, 0.2);
border: 1px solid #333;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
color: white;
}
.front { transform: translateZ(100px); }
.back { transform: translateZ(-100px) rotateY(180deg); }
.right { transform: rotateY(90deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
@keyframes spin {
0% { transform: rotateY(0); }
100% { transform: rotateY(360deg); }
}
Understanding the code
We have finished building our 3D cube. Let’s now check how it was created and how it functions.
Step 1: Using the body tag selector we will add the styling to our website. We will center our cube both horizontally and vertically on the page and also set the background color for the page.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
display: flex: This property allows us to center the cube both horizontally and vertically.
justify-content: center; and align-items: center; These properties align the content (the cube) to the center both horizontally and vertically.
height: 100vh; This ensures that the page takes up the full viewport height, making the cube centered on the screen.
margin: 0; This removes any default margins on the page.
background-color: #f0f0f0; This sets the background color of the page to a light gray.
Styling the Cube Container
Using the class (.cube) selector we will add the styling to our cube.
.cube {
perspective: 800px;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: spin 5s infinite linear;
}
perspective: 800px; The perspective property creates the 3D space in which our cube exists. A higher value results in a stronger 3D effect.
width: 200px; and height: 200px; These set the dimensions of the cube container.
transform-style: preserve-3d; This property ensures that child elements (div faces) are rendered in 3D space.
animation: spin 5s infinite linear; We add an animation to make the cube spin continuously. The @keyframes animation is defined later in the CSS.
Styling the Cube faces
The .face class is used to add styling to each face of the cube. Using the transform property. we will add convert the cube in to 3D space.
.face {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, 0.2);
border: 1px solid #333;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
color: white;
}
position: absolute; This allows us to precisely position each face in the 3D space of the cube.
width: 200px; and height: 200px; These define the dimensions of each face.
background-color: rgba(0, 0, 0, 0.2); We set a background color with some transparency to give the cube a semi-transparent look.
border: 1px solid #333; This adds a thin border to each face for visual separation.
display: flex; We use Flexbox to center the content (text) within each face.
justify-content: center; and align-items: center; These properties center the content both horizontally and vertically.
font-size: 24px; and font-weight: bold; We set the text size and weight to make it stand out.
color: white; This sets the text color to white.
Using the transform property we will now place all the faces in their right places.
.front { transform: translateZ(100px); }
.back { transform: translateZ(-100px) rotateY(180deg); }
.right { transform: rotateY(90deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
Cube Rotation Animation
The cube rotation animation is then created using @keyframes. The cube is continuously rotated 360 degrees around the Y-axis in this animation.
@keyframes spin {
0% { transform: rotateY(0); }
100% { transform: rotateY(360deg); }
}
Step3: View in the Browser
Save your HTML and CSS files, then open a web browser to view the HTML file. You should see a three-dimensional cube with six faces that are labelled “Front,” “Back,” “Right,” “Left,” “Top,” and “Bottom.” The animation we applied will cause the cube to revolve continually.
Congratulations! By using CSS3 and HTML, you were able to effectively design a 3D cube. Feel free to alter the cube’s design and animation to meet the requirements of your project.
Conclusion
Hopefully, you have learned step by step how I created this 3D cube using HTML and CSS.
ADVERTISEMENT
If you find this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
ADVERTISEMENT
