diff --git a/Art/RikyShafer-Dreidel/index.html b/Art/RikyShafer-Dreidel/index.html new file mode 100644 index 000000000..a01b8f0ed --- /dev/null +++ b/Art/RikyShafer-Dreidel/index.html @@ -0,0 +1,74 @@ + + + + + + סביבון תלת-ממדי + + + +
+ סביבון סוב סוב סוב חנוכה הוא חג טוב +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
נ
+
+
+
+
+
+
+
+
+
+
+
+
ש
+
ג +
+
+
+
+
+
+
+
+
+
+
+
+
ה +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+ + diff --git a/Art/RikyShafer-Dreidel/meta.json b/Art/RikyShafer-Dreidel/meta.json new file mode 100644 index 000000000..f40c75963 --- /dev/null +++ b/Art/RikyShafer-Dreidel/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "Dreidel", + "githubHandle": "RikyShafer" + } \ No newline at end of file diff --git a/Art/RikyShafer-Dreidel/styles.css b/Art/RikyShafer-Dreidel/styles.css new file mode 100644 index 000000000..39fc38f22 --- /dev/null +++ b/Art/RikyShafer-Dreidel/styles.css @@ -0,0 +1,195 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #282c34; + perspective: 1000px; /* מוסיף עומק לתלת ממד */ + flex-direction: column; /* מסדר את התוכן בצורה אנכית */ +} + +.dreidel-container { + position: relative; + width: 150px; + height: 150px; + transform-style: preserve-3d; + animation: spin 4s infinite linear; + transform-origin: bottom center; /* קובע את נקודת הסיבוב על השפיץ */ + margin-bottom: 50px; /* מקום בין הסביבון לכיתוב */ +} + +.dreidel-face { + position: absolute; + width: 150px; + height: 150px; + background: linear-gradient(to bottom, #ffcc00, #ff9900); + border: 4px solid #ffd700; + display: flex; + justify-content: center; + align-items: center; + font-family: "Arial", sans-serif; + font-size: 36px; + font-weight: bold; + color: #000; + text-shadow: 2px 2px 4px #ffd700; +} + +/* מיקום כל אחת מהפאות של הקוביה */ +.front { + transform: rotateY(0deg) translateZ(75px); +} + +.back { + transform: rotateY(180deg) translateZ(75px); +} + +.left { + transform: rotateY(-90deg) translateZ(75px); +} + +.right { + transform: rotateY(90deg) translateZ(75px); +} + +.top { + transform: rotateX(90deg) translateZ(75px); +} + +.bottom { + transform: rotateX(-90deg) translateZ(75px); +} + +/* החוד התחתון */ +.dreidel-point { + position: absolute; + bottom: -75px; + left: 50%; + transform: translateX(-50%); + width: 0; + height: 0; + border-left: 75px solid transparent; + border-right: 75px solid transparent; + border-top: 150px solid #ff9900; +} + +/* המקל העליון */ +.dreidel-stick { + position: absolute; + top: -50px; + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 50px; + background: linear-gradient(to bottom, #ffcc00, #ff9900); + border-radius: 10px; + box-shadow: 0 0 10px rgba(255, 223, 0, 0.8); +} + +/* אנימציית סיבוב */ +@keyframes spin { + 0% { + transform: rotateY(0deg); + } + 25% { + transform: rotateY(90deg); + } + 50% { + transform: rotateY(180deg); + } + 75% { + transform: rotateY(270deg); + } + 100% { + transform: rotateY(360deg); + } +} + +/* כיתוב קבוע מעל הסביבון */ +.text { + font-family: "Arial", sans-serif; + font-size: 30px; + color: #ffd700; + text-align: center; + text-shadow: 2px 2px 4px #000; + white-space: nowrap; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + top: -100px; + transform: rotate(-20deg); /* נותן כיוון עגול לכיתוב */ +} +.face { + position: absolute; + top: 10%; + left: 50%; + transform: translate(-50%, -30%); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.eyes { + display: flex; +} + + +.eye-to { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 20px; + height: 20px; + background-color: white; + border-radius: 50%; + margin: 5px; +} + +.eye { + position: absolute; + width: 10px; + height: 10px; + background-color: black; + border-radius: 50%; + animation: move-eye 2s infinite alternate ease-in-out; +} + +@keyframes move-eye { + 0% { + transform: translate(5px, 0); + /* יזוז ימינה */ + } + + 25% { + transform: translate(0, -5px); + /* למעלה */ + } + + 50% { + transform: translate(-5px, 0); + /* שמאלה */ + } + + 75% { + transform: translate(0, 5px); + /* למטה */ + } + + 100% { + transform: translate(5px, 0); + /* חזרה לימינה */ + } +} + +.smile { + width: 25px; + height: 11px; + border: 2px solid #000; + border-top: none; + border-radius: 1px 0 20px 16px; + /* margin-top: 5px; */ + +} \ No newline at end of file