Here’s a step-by-step explanation of the 3D Boxes Background HTML, CSS, and JavaScript code you shared:
1. HTML Code
<!--CodeCraft by Rana-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<title>3D Boxes Background - CodeCraft by Rana</title>
</head>
<body>
<h2>CodeCraft by Rana</h2>
<button id="btn" class="magic">Magic 🎩</button>
<div id="boxes" class="boxes big"></div>
<script src="script.js"></script>
</body>
</html>
Explanation:
- DOCTYPE Declaration:
<!DOCTYPE html>Tells the browser that this is an HTML5 document. <html lang="en">: The language of the document is set to English.<head>Section:<meta charset="UTF-8" />: Sets the character encoding to UTF-8, which supports all characters.<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Makes the page responsive, ensuring it looks good on all devices by scaling the viewport.<link rel="stylesheet" href="https://cdnjs...">: Links to an external Font Awesome stylesheet for using icons.<link rel="stylesheet" href="style.css" />: Links the CSS file (style.css) that styles the page.<title>3D Boxes Background - CodeCraft by Rana</title>: Sets the page title that appears on the browser tab.
<body>Section:<h2>CodeCraft by Rana</h2>: Displays the title of the page on the screen.<button id="btn" class="magic">Magic 🎩</button>: A button with the text “Magic 🎩” and an IDbtn. This button is used to trigger the JavaScript functionality.<div id="boxes" class="boxes big"></div>: An empty container that will be populated with boxes using JavaScript. It has both anid="boxes"and a classboxes big.<script src="script.js"></script>: Links to the external JavaScript file (script.js), which controls the dynamic behavior of the page.
2. CSS Code
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #fafafa;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.body h2 {
font-family: 'Poppins', sans-serif;
font-size: 24px;
margin-bottom: 10px;
}
.magic {
background-color: #f9ca24;
color: #fff;
font-family: 'Poppins', sans-serif;
border: 0;
border-radius: 3px;
font-size: 16px;
padding: 12px 20px;
cursor: pointer;
position: fixed;
top: 20px;
letter-spacing: 1px;
box-shadow: 0 3px rgba(249, 202, 36, 0.5);
z-index: 100;
}
.magic:focus {
outline: none;
}
.magic:active {
box-shadow: none;
transform: translateY(2px);
}
.boxes {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
height: 500px;
width: 500px;
position: relative;
transition: 0.4s ease;
}
.boxes.big {
width: 600px;
height: 600px;
}
.boxes.big .box {
transform: rotateZ(360deg);
}
.box {
background-image: url('https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmdseGhuY2U3bTJua2tmdGZkeTJ4MHVlc2Fzczc1azVqNDI1N2xwNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/vLbUtC258mSzQJGr1m/giphy-downsized-large.gif');
background-repeat: no-repeat;
background-size: 500px 500px;
position: relative;
height: 125px;
width: 125px;
transition: 0.4s ease;
}
.box::after {
content: '';
background-color: #f6e58d;
position: absolute;
top: 8px;
right: -15px;
height: 100%;
width: 15px;
transform: skewY(45deg);
}
.box::before {
content: '';
background-color: #f9ca24;
position: absolute;
bottom: -15px;
left: 8px;
height: 15px;
width: 100%;
transform: skewX(45deg);
}
Explanation:
- Global Styles:
@importstatements import Google Fonts (Roboto and Poppins).* { box-sizing: border-box; }: Ensures that padding and borders are included in the element’s total width and height.
bodystyles: The body is centered, has a light background, and uses the Roboto font..magicbutton styles: A yellow button with white text, slightly rounded corners, and a shadow. When clicked or focused, it changes appearance with subtle animations..boxes: A container for the boxes. It has a fixed size of 500px by 500px, and when thebigclass is applied, it enlarges to 600px by 600px..boxstyles: Each box displays a section of a GIF, with a skewed shadow effect created using::afterand::beforepseudo-elements.
3. JavaScript Code
//CodeCraft by Rana
const boxesContainer = document.getElementById("boxes");
const btn = document.getElementById("btn");
btn.addEventListener("click", () => boxesContainer.classList.toggle("big"));
function createBoxes() {
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
const box = document.createElement("div");
box.classList.add("box");
box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`;
boxesContainer.appendChild(box);
}
}
}
createBoxes();
Explanation:
- DOM Element Selection:
const boxesContainer = document.getElementById("boxes");: Selects the<div>with theid="boxes".const btn = document.getElementById("btn");: Selects the<button>with theid="btn".
- Event Listener:
btn.addEventListener("click", () => boxesContainer.classList.toggle("big"));: The big class is toggled on the boxes Container when the button is clicked. This triggers the CSS transformation that enlarges the box grid and rotates each box.
- createBoxes Function:
createBoxes(): This function dynamically creates 16divelements (4 rows and 4 columns) and adds theboxclass to each of them.- The
backgroundPositionproperty is set based on the row (i) and column (j), ensuring each box displays a different part of the background image. - Finally, the box is appended to the
boxesContainer.
- Function Call:
createBoxes();: Immediately calls thecreateBoxes()function to create the boxes when the page loads.
Overall Summary:
This code creates a grid of 16 boxes (4x4), each displaying a portion of a large GIF. The button, labelled "Magic 🎩", triggers a transformation on the grid, enlarging it and rotating the boxes in 3D. The dynamic behavior is handled with JavaScript, while the styling is done through CSS. read more
