ערימת כרטיסים

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

סצנת SVG מונפשת · עיצוב · תלת-מימד · תלת-מימד

.klix-s-stack { perspective: 900px; width: 11rem; height: 7rem }
.klix-s-stack > div { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateX(18deg) rotateY(-22deg); animation: klix-s-stack 5s ease-in-out infinite }
.klix-s-stack span { position: absolute; inset: 0; border-radius: .8rem;
  background: linear-gradient(135deg,#6366f1,#ec4899); box-shadow: 0 8px 20px -8px rgba(0,0,0,.6) }
.klix-s-stack span:nth-child(1) { transform: translateZ(0) }
.klix-s-stack span:nth-child(2) { transform: translateZ(1.6rem) translateX(.6rem); opacity: .85 }
.klix-s-stack span:nth-child(3) { transform: translateZ(3.2rem) translateX(1.2rem); opacity: .7 }
@keyframes klix-s-stack { 0%,100% { transform: rotateX(18deg) rotateY(-22deg) }
  50% { transform: rotateX(12deg) rotateY(-6deg) } }