MAKING 3D CUBE USING PYTHON
How to Create a 3D Cube with CSS-
DOWNLOAD THE SOURCE CODE👉-
PDF LINK DOWNLOAD
STEP BY STEP CODING-
Step 1: Set Up the Basic HTML Structure
First,
you'll need an HTML structure to hold the cube.
The structure should include a container div that holds six child div elements,
each representing one face of the cube.
html
Copy
HTML CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Cube with CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</body>
</html>
STEP-2:
CSS CODE-
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: rotateCube 5s infinite linear;
}
.face {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 255, 0.6);
border: 2px solid #333;
}
.front { transform: translateZ(100px); background-color: rgba(255, 0, 0, 0.7); }
.back { transform: rotateY(180deg) translateZ(100px); background-color: rgba(0, 255, 0, 0.7); }
.left { transform: rotateY(-90deg) translateZ(100px); background-color: rgba(0, 0, 255, 0.7); }
.right { transform: rotateY(90deg) translateZ(100px); background-color: rgba(255, 255, 0, 0.7); }
.top { transform: rotateX(90deg) translateZ(100px); background-color: rgba(255, 165, 0, 0.7); }
.bottom { transform: rotateX(-90deg) translateZ(100px); background-color: rgba(255, 0, 255, 0.7); }
@keyframes rotateCube {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
RUN IT IN YOUR COMPILER
Step 3: Explanation of the Code
-
transform-style: preserve-3d: This property is necessary to maintain the 3D positioning of the cube's faces.
-
perspective: We don't directly use this property here, but it would be useful if you want to control how the 3D space is viewed. In our case, the rotateY transformation is sufficient for basic effects.
-
Each face has a unique transformation to position it correctly in 3D space. For example, the .front face is simply pushed out along the Z-axis, while the .back face is rotated 180 degrees on the Y-axis and translated forward.
Step 4: Output
Here's a preview of what the cube will look like once rendered in the browser:
-
The cube will rotate continuously due to the @keyframes animation, creating the illusion of a 3D object.
-
Each side of the cube will have a different color to help distinguish them.
Conclusion
This is a basic way to create a rotating 3D cube with just HTML and CSS. You can further enhance it by adding shadows, lighting effects, or interactive features (like user-controlled rotation).
JAI HIND
Comments
Post a Comment