Skip to content

Commit 798daec

Browse files
RikyShaferLaurelineP
RikyShafer
and
LaurelineP
authored
3D Animated Dreidel (#2896)
* Your commit message * Adding my animation !!! * Adding my animation !!! --------- Co-authored-by: Laureline Paris <[email protected]>
1 parent b8560e8 commit 798daec

File tree

3 files changed

+273
-0
lines changed

3 files changed

+273
-0
lines changed

‎Art/RikyShafer-Dreidel/index.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="he">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>סביבון תלת-ממדי</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="text">
11+
סביבון סוב סוב סוב חנוכה הוא חג טוב
12+
</div>
13+
<div class="dreidel-container">
14+
15+
<!-- פאות הסביבון -->
16+
<div class="dreidel-face front">
17+
<div class="face">
18+
<div class="eyes">
19+
<div class="eye-to">
20+
<div class="eye"></div>
21+
</div>
22+
<div class="eye-to">
23+
<div class="eye"></div>
24+
</div>
25+
</div>
26+
<div class="smile"></div>
27+
</div>נ</div>
28+
<div class="dreidel-face back">
29+
<div class="face">
30+
<div class="eyes">
31+
<div class="eye-to">
32+
<div class="eye"></div>
33+
</div>
34+
<div class="eye-to">
35+
<div class="eye"></div>
36+
</div>
37+
</div>
38+
<div class="smile"></div>
39+
</div>ש</div>
40+
<div class="dreidel-face left">ג
41+
<div class="face">
42+
<div class="eyes">
43+
<div class="eye-to">
44+
<div class="eye"></div>
45+
</div>
46+
<div class="eye-to">
47+
<div class="eye"></div>
48+
</div>
49+
</div>
50+
<div class="smile"></div>
51+
</div>
52+
</div>
53+
<div class="dreidel-face right">ה
54+
<div class="face">
55+
<div class="eyes">
56+
<div class="eye-to">
57+
<div class="eye"></div>
58+
</div>
59+
<div class="eye-to">
60+
<div class="eye"></div>
61+
</div>
62+
</div>
63+
<div class="smile"></div>
64+
</div>
65+
</div>
66+
<div class="dreidel-face top"></div>
67+
<div class="dreidel-face bottom"></div>
68+
<!-- החוד בתחתית -->
69+
<div class="dreidel-point"></div>
70+
<!-- המקל למעלה -->
71+
<div class="dreidel-stick"></div>
72+
</div>
73+
</body>
74+
</html>

‎Art/RikyShafer-Dreidel/meta.json

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

‎Art/RikyShafer-Dreidel/styles.css

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
height: 100vh;
6+
margin: 0;
7+
background-color: #282c34;
8+
perspective: 1000px; /* מוסיף עומק לתלת ממד */
9+
flex-direction: column; /* מסדר את התוכן בצורה אנכית */
10+
}
11+
12+
.dreidel-container {
13+
position: relative;
14+
width: 150px;
15+
height: 150px;
16+
transform-style: preserve-3d;
17+
animation: spin 4s infinite linear;
18+
transform-origin: bottom center; /* קובע את נקודת הסיבוב על השפיץ */
19+
margin-bottom: 50px; /* מקום בין הסביבון לכיתוב */
20+
}
21+
22+
.dreidel-face {
23+
position: absolute;
24+
width: 150px;
25+
height: 150px;
26+
background: linear-gradient(to bottom, #ffcc00, #ff9900);
27+
border: 4px solid #ffd700;
28+
display: flex;
29+
justify-content: center;
30+
align-items: center;
31+
font-family: "Arial", sans-serif;
32+
font-size: 36px;
33+
font-weight: bold;
34+
color: #000;
35+
text-shadow: 2px 2px 4px #ffd700;
36+
}
37+
38+
/* מיקום כל אחת מהפאות של הקוביה */
39+
.front {
40+
transform: rotateY(0deg) translateZ(75px);
41+
}
42+
43+
.back {
44+
transform: rotateY(180deg) translateZ(75px);
45+
}
46+
47+
.left {
48+
transform: rotateY(-90deg) translateZ(75px);
49+
}
50+
51+
.right {
52+
transform: rotateY(90deg) translateZ(75px);
53+
}
54+
55+
.top {
56+
transform: rotateX(90deg) translateZ(75px);
57+
}
58+
59+
.bottom {
60+
transform: rotateX(-90deg) translateZ(75px);
61+
}
62+
63+
/* החוד התחתון */
64+
.dreidel-point {
65+
position: absolute;
66+
bottom: -75px;
67+
left: 50%;
68+
transform: translateX(-50%);
69+
width: 0;
70+
height: 0;
71+
border-left: 75px solid transparent;
72+
border-right: 75px solid transparent;
73+
border-top: 150px solid #ff9900;
74+
}
75+
76+
/* המקל העליון */
77+
.dreidel-stick {
78+
position: absolute;
79+
top: -50px;
80+
left: 50%;
81+
transform: translateX(-50%);
82+
width: 20px;
83+
height: 50px;
84+
background: linear-gradient(to bottom, #ffcc00, #ff9900);
85+
border-radius: 10px;
86+
box-shadow: 0 0 10px rgba(255, 223, 0, 0.8);
87+
}
88+
89+
/* אנימציית סיבוב */
90+
@keyframes spin {
91+
0% {
92+
transform: rotateY(0deg);
93+
}
94+
25% {
95+
transform: rotateY(90deg);
96+
}
97+
50% {
98+
transform: rotateY(180deg);
99+
}
100+
75% {
101+
transform: rotateY(270deg);
102+
}
103+
100% {
104+
transform: rotateY(360deg);
105+
}
106+
}
107+
108+
/* כיתוב קבוע מעל הסביבון */
109+
.text {
110+
font-family: "Arial", sans-serif;
111+
font-size: 30px;
112+
color: #ffd700;
113+
text-align: center;
114+
text-shadow: 2px 2px 4px #000;
115+
white-space: nowrap;
116+
display: flex;
117+
justify-content: center;
118+
align-items: center;
119+
position: absolute;
120+
top: -100px;
121+
transform: rotate(-20deg); /* נותן כיוון עגול לכיתוב */
122+
}
123+
.face {
124+
position: absolute;
125+
top: 10%;
126+
left: 50%;
127+
transform: translate(-50%, -30%);
128+
display: flex;
129+
align-items: center;
130+
justify-content: center;
131+
flex-direction: column;
132+
}
133+
134+
.eyes {
135+
display: flex;
136+
}
137+
138+
139+
.eye-to {
140+
position: relative;
141+
display: flex;
142+
justify-content: center;
143+
align-items: center;
144+
width: 20px;
145+
height: 20px;
146+
background-color: white;
147+
border-radius: 50%;
148+
margin: 5px;
149+
}
150+
151+
.eye {
152+
position: absolute;
153+
width: 10px;
154+
height: 10px;
155+
background-color: black;
156+
border-radius: 50%;
157+
animation: move-eye 2s infinite alternate ease-in-out;
158+
}
159+
160+
@keyframes move-eye {
161+
0% {
162+
transform: translate(5px, 0);
163+
/* יזוז ימינה */
164+
}
165+
166+
25% {
167+
transform: translate(0, -5px);
168+
/* למעלה */
169+
}
170+
171+
50% {
172+
transform: translate(-5px, 0);
173+
/* שמאלה */
174+
}
175+
176+
75% {
177+
transform: translate(0, 5px);
178+
/* למטה */
179+
}
180+
181+
100% {
182+
transform: translate(5px, 0);
183+
/* חזרה לימינה */
184+
}
185+
}
186+
187+
.smile {
188+
width: 25px;
189+
height: 11px;
190+
border: 2px solid #000;
191+
border-top: none;
192+
border-radius: 1px 0 20px 16px;
193+
/* margin-top: 5px; */
194+
195+
}

0 commit comments

Comments
 (0)