In this article, we’ll explore how to build a visually appealing 3D Rubik’s Cube using just HTML and CSS. This fun project will not only enhance your web development skills but also introduce you to the principles of 3D transformations and styling in CSS. Let’s dive in!
What You’ll Learn
- Setting up the HTML structure for the cube
- Using CSS to create 3D effects
- Adding lines between colors for a realistic look
- Animating the cube for dynamic display
Follow this video for complete guidance :
Step 1: Setting Up the HTML Structure
To begin, we’ll create a basic HTML structure for our Rubik’s Cube. Each face of the cube will be represented by a div, and within those, we will add smaller div elements to represent the individual squares.
Here’s the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rubik's Cube</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="rubiks-cube">
<div class="face front">
<div class="block red"></div>
<div class="block red"></div>
<div class="block red"></div>
<div class="block red"></div>
<div class="block red"></div>
<div class="block red"></div>
<div class="block red"></div>
<div class="block red"></div>
<div class="block red"></div>
</div>
<div class="face back">
<div class="block orange"></div>
<div class="block orange"></div>
<div class="block orange"></div>
<div class="block orange"></div>
<div class="block orange"></div>
<div class="block orange"></div>
<div class="block orange"></div>
<div class="block orange"></div>
<div class="block orange"></div>
</div>
<div class="face left">
<div class="block green"></div>
<div class="block green"></div>
<div class="block green"></div>
<div class="block green"></div>
<div class="block green"></div>
<div class="block green"></div>
<div class="block green"></div>
<div class="block green"></div>
<div class="block green"></div>
</div>
<div class="face right">
<div class="block blue"></div>
<div class="block blue"></div>
<div class="block blue"></div>
<div class="block blue"></div>
<div class="block blue"></div>
<div class="block blue"></div>
<div class="block blue"></div>
<div class="block blue"></div>
<div class="block blue"></div>
</div>
<div class="face top">
<div class="block white"></div>
<div class="block white"></div>
<div class="block white"></div>
<div class="block white"></div>
<div class="block white"></div>
<div class="block white"></div>
<div class="block white"></div>
<div class="block white"></div>
<div class="block white"></div>
</div>
<div class="face bottom">
<div class="block yellow"></div>
<div class="block yellow"></div>
<div class="block yellow"></div>
<div class="block yellow"></div>
<div class="block yellow"></div>
<div class="block yellow"></div>
<div class="block yellow"></div>
<div class="block yellow"></div>
<div class="block yellow"></div>
</div>
</div>
</body>
</html>
Step 2: Styling with CSS
Next, we’ll style our cube using CSS. The key here is to use CSS 3D transforms to position each face of the cube correctly. We’ll also implement a grid layout to create the smaller squares and add borders for separation.
Here’s the CSS code:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
perspective: 800px;
}
.rubiks-cube {
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(30deg);
animation: rotate 10s infinite linear;
}
.face {
position: absolute;
width: 100px;
height: 100px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
border: 2px solid #333;
}
.block {
border: 1px solid #333; /* Line between colors */
box-sizing: border-box; /* Include border in total width/height */
}
.red { background-color: red; }
.orange { background-color: orange; }
.green { background-color: green; }
.blue { background-color: blue; }
.white { background-color: white; }
.yellow { background-color: yellow; }
.front { transform: translateZ(50px); }
.back { transform: rotateY(180deg) translateZ(50px); }
.left { transform: rotateY(-90deg) translateZ(50px); }
.right { transform: rotateY(90deg) translateZ(50px); }
.top { transform: rotateX(90deg) translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }
@keyframes rotate {
0% {
transform: rotateX(-30deg) rotateY(0deg);
}
100% {
transform: rotateX(-30deg) rotateY(360deg);
}
}
Step 3: Viewing Your Creation
Once you’ve added the HTML and CSS code to your project, open the HTML file in your web browser. You should see a beautifully rendered 3D Rubik’s Cube, complete with colored blocks and lines separating them. The cube will even rotate to provide a dynamic visual effect!
Customization Ideas
Feel free to modify the colors, sizes, and animation speed to create your own unique version of the Rubik’s Cube. You might also experiment with adding interactivity, such as rotating the cube in response to mouse movements or clicks.
Creating a 3D Rubik’s Cube with HTML and CSS is a fantastic way to enhance your front-end skills while having fun. This project showcases the power of CSS for creating engaging visual elements without the need for complex JavaScript or graphics libraries.
Try it out, customize it, and enjoy your very own virtual Rubik’s Cube! Happy coding!
