Skip to content

Commit ad557c0

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request #182 from AmolShelke2/3d_box
Added animated 3d box project.
2 parents ae728b0 + 7ae7cef commit ad557c0

File tree

3 files changed

+126
-0
lines changed

3 files changed

+126
-0
lines changed

‎3d boxes/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>3D box</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<button id="btn" class="magic">Magic🤔</button>
12+
<div id="boxes" class="boxes big"></div>
13+
<script src="script.js"></script>
14+
</body>
15+
</html>

‎3d boxes/script.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const boxesContainer = document.getElementById("boxes");
2+
const btn = document.getElementById("btn");
3+
4+
btn.addEventListener("click", () => boxesContainer.classList.toggle("big"));
5+
6+
function createBoxes() {
7+
for (let i = 0; i < 4; i++) {
8+
for (let j = 0; j < 4; j++) {
9+
const box = document.createElement("div");
10+
box.classList.add("box");
11+
box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`;
12+
boxesContainer.appendChild(box);
13+
}
14+
}
15+
}
16+
17+
createBoxes();

‎3d boxes/style.css

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
2+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
3+
4+
* {
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: "Roboto", sans-serif;
10+
background: #fafafa;
11+
display: flex;
12+
flex-direction: column;
13+
align-items: center;
14+
justify-content: center;
15+
height: 100vh;
16+
margin: 0;
17+
overflow: hidden;
18+
}
19+
20+
.magic {
21+
background-color: #f9ca24;
22+
color: #fff;
23+
font-family: "Poppins", sans-serif;
24+
border: none;
25+
border-radius: 3px;
26+
font-size: 16px;
27+
padding: 12px 20px;
28+
cursor: pointer;
29+
position: fixed;
30+
top: 40px;
31+
letter-spacing: 1px;
32+
box-shadow: 0 3px rgba(249, 202, 36, 0.5);
33+
z-index: 100;
34+
}
35+
36+
.magic:focus {
37+
outline: none;
38+
}
39+
40+
.magic:active {
41+
box-shadow: none;
42+
transform: translateY(2px);
43+
}
44+
45+
.boxes {
46+
height: 500px;
47+
width: 500px;
48+
display: flex;
49+
flex-wrap: wrap;
50+
position: relative;
51+
justify-content: space-around;
52+
transition: 0.4s ease;
53+
}
54+
55+
.boxes.big .box {
56+
transform: rotateZ(360deg);
57+
}
58+
59+
.boxes.big {
60+
width: 600px;
61+
height: 600px;
62+
}
63+
64+
.box {
65+
background-image: url("https://images.unsplash.com/photo-1642715729583-22dc46d09c8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80");
66+
background-repeat: no-repeat;
67+
background-size: 500px 500px;
68+
position: relative;
69+
height: 125px;
70+
width: 125px;
71+
transition: 0.4s ease;
72+
}
73+
74+
.box::after {
75+
content: "";
76+
background-color: #f6e58d;
77+
position: absolute;
78+
top: 8px;
79+
right: -15px;
80+
height: 100%;
81+
width: 15px;
82+
transform: skewY(45deg);
83+
}
84+
85+
.box::before {
86+
content: "";
87+
background-color: #f9ca24;
88+
position: absolute;
89+
bottom: -15px;
90+
left: 8px;
91+
height: 15px;
92+
width: 100%;
93+
transform: skewX(45deg);
94+
}

0 commit comments

Comments
 (0)