מתנה תלת-מימדית

מתנה תלת-מימדית הוא סצנת SVG מונפשת מתוך סצנות מונפשות של כליקס. מה שמורידים הוא קובץ SVG שההנפשה שלו כתובה בתוכו, ולכן הוא עובד גם כתגית img. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד. מתאים לעמודים ולמסמכים שעוסקים בחגיגה, תלת-מימד ותלת-מימד. באותה סדרה יש גם מתנה קופצת, לחיים ועוגת יום הולדת.

סצנת SVG מונפשת · חגיגה · תלת-מימד · תלת-מימד

.klix-s-gift { perspective: 700px; width: 6rem; height: 6rem }
.klix-s-gift > div { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  animation: klix-s-gift 8s linear infinite }
.klix-s-gift span { position: absolute; inset: 0; background: #e11d48;
  border: 2px solid #fda4af; box-sizing: border-box }
.klix-s-gift span::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,transparent 42%,#fbbf24 42% 58%,transparent 58%) }
.klix-s-gift span:nth-child(1) { transform: translateZ(3rem) }
.klix-s-gift span:nth-child(2) { transform: rotateY(180deg) translateZ(3rem) }
.klix-s-gift span:nth-child(3) { transform: rotateY(90deg) translateZ(3rem) }
.klix-s-gift span:nth-child(4) { transform: rotateY(-90deg) translateZ(3rem) }
.klix-s-gift span:nth-child(5) { transform: rotateX(90deg) translateZ(3rem) }
.klix-s-gift span:nth-child(6) { transform: rotateX(-90deg) translateZ(3rem) }
@keyframes klix-s-gift { to { transform: rotateY(360deg) rotateX(18deg) } }