Skip to content

Commit 8610bcd

Browse files
vs-code06LaurelineP
vs-code06
and
LaurelineP
authored
Cosmic Tesseract (#3229)
* temporal-ripples * Temporal Ripples * Fractal Bloom * Quantum Tunnel * Temporal Ripples * Cosmic Tesseract * folder name change --------- Co-authored-by: Laureline Paris <laurelinedev@gmail.com>
1 parent c5f5bc8 commit 8610bcd

3 files changed

Lines changed: 69 additions & 0 deletions

File tree

‎Art/vs-code06-Cosmic_Tesseract/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Cosmic Tesseract</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<div class="tesseract">
11+
<div class="face"></div>
12+
<div class="face"></div>
13+
<div class="face"></div>
14+
<div class="face"></div>
15+
<div class="face"></div>
16+
<div class="face"></div>
17+
</div>
18+
</body>
19+
</html>

‎Art/vs-code06-Cosmic_Tesseract/meta.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"githubHandle": "vs-code06",
3+
"artName": "Cosmic Tesseract"
4+
}
5+

‎Art/vs-code06-Cosmic_Tesseract/styles.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
body {
2+
margin: 0;
3+
background: #070a1a;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
height: 100vh;
8+
}
9+
10+
.tesseract {
11+
position: relative;
12+
width: 150px;
13+
height: 150px;
14+
animation: rotate 4s infinite linear;
15+
}
16+
17+
.face {
18+
position: absolute;
19+
width: 100%;
20+
height: 100%;
21+
border: 3px solid #7efaff;
22+
box-shadow: 0 0 25px #00eaff;
23+
animation: pulse 2s infinite ease-in-out;
24+
}
25+
26+
.face:nth-child(1) { transform: rotateY(0deg) translateZ(50px); }
27+
.face:nth-child(2) { transform: rotateY(90deg) translateZ(50px); }
28+
.face:nth-child(3) { transform: rotateY(180deg) translateZ(50px); }
29+
.face:nth-child(4) { transform: rotateY(270deg) translateZ(50px); }
30+
.face:nth-child(5) { transform: rotateX(90deg) translateZ(50px); }
31+
.face:nth-child(6) { transform: rotateX(-90deg) translateZ(50px); }
32+
33+
@keyframes rotate {
34+
from { transform: rotateX(0) rotateY(0); }
35+
to { transform: rotateX(360deg) rotateY(360deg); }
36+
}
37+
38+
@keyframes pulse {
39+
0%, 100% { opacity: .7; }
40+
50% { opacity: 1; }
41+
}
42+
43+
:root {
44+
perspective: 600px;
45+
}

0 commit comments

Comments
 (0)