Skip to content

Commit 9a0c3c0

Browse files
jasonjun1221jasonjun1221
authored
adding my art to the project (#3338)
1 parent dc76db8 commit 9a0c3c0

3 files changed

Lines changed: 98 additions & 0 deletions

File tree

‎Art/jasonjun122-3d-neon-cube/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>3D Neon Cube</title>
6+
<link rel="stylesheet" href="styles.css" />
7+
</head>
8+
<body>
9+
<div class="scene">
10+
<div class="cube">
11+
<div class="face front"></div>
12+
<div class="face back"></div>
13+
<div class="face right"></div>
14+
<div class="face left"></div>
15+
<div class="face top"></div>
16+
<div class="face bottom"></div>
17+
</div>
18+
</div>
19+
</body>
20+
</html>

‎Art/jasonjun122-3d-neon-cube/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "3d-neon-cube",
3+
"githubHandle": "jasonjun1221"
4+
}

‎Art/jasonjun122-3d-neon-cube/styles.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
height: 100vh;
9+
background: radial-gradient(circle at center, #020617, #000);
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
overflow: hidden;
14+
}
15+
16+
/* 3D scene */
17+
.scene {
18+
width: 300px;
19+
height: 300px;
20+
perspective: 900px;
21+
}
22+
23+
/* Cube */
24+
.cube {
25+
width: 100%;
26+
height: 100%;
27+
position: relative;
28+
transform-style: preserve-3d;
29+
animation: spin 12s infinite linear;
30+
}
31+
32+
/* Faces */
33+
.face {
34+
position: absolute;
35+
width: 300px;
36+
height: 300px;
37+
background: linear-gradient(135deg, #22d3ee, #6366f1);
38+
opacity: 0.85;
39+
border: 2px solid rgba(56, 189, 248, 0.6);
40+
box-shadow: 0 0 20px rgba(56, 189, 248, 0.8), inset 0 0 30px rgba(99, 102, 241, 0.9);
41+
}
42+
43+
/* Position faces */
44+
.front {
45+
transform: translateZ(150px);
46+
}
47+
.back {
48+
transform: rotateY(180deg) translateZ(150px);
49+
}
50+
.right {
51+
transform: rotateY(90deg) translateZ(150px);
52+
}
53+
.left {
54+
transform: rotateY(-90deg) translateZ(150px);
55+
}
56+
.top {
57+
transform: rotateX(90deg) translateZ(150px);
58+
}
59+
.bottom {
60+
transform: rotateX(-90deg) translateZ(150px);
61+
}
62+
63+
/* Rotation animation */
64+
@keyframes spin {
65+
0% {
66+
transform: rotateX(0deg) rotateY(0deg);
67+
}
68+
50% {
69+
transform: rotateX(180deg) rotateY(180deg);
70+
}
71+
100% {
72+
transform: rotateX(360deg) rotateY(360deg);
73+
}
74+
}

0 commit comments

Comments
 (0)