קובייה מתגלגלת

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

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

.klix-s-dice { perspective: 700px; width: 5.5rem; height: 5.5rem }
.klix-s-dice > div { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  animation: klix-s-dice 6s cubic-bezier(.6,0,.4,1) infinite }
.klix-s-dice span { position: absolute; inset: 0; border-radius: .7rem; background: #f8fafc;
  border: 1px solid #cbd5e1; display: grid; place-items: center; font-size: 1.6rem; color: #0f172a }
.klix-s-dice span:nth-child(1) { transform: translateZ(2.75rem) }
.klix-s-dice span:nth-child(2) { transform: rotateY(180deg) translateZ(2.75rem) }
.klix-s-dice span:nth-child(3) { transform: rotateY(90deg) translateZ(2.75rem) }
.klix-s-dice span:nth-child(4) { transform: rotateY(-90deg) translateZ(2.75rem) }
.klix-s-dice span:nth-child(5) { transform: rotateX(90deg) translateZ(2.75rem) }
.klix-s-dice span:nth-child(6) { transform: rotateX(-90deg) translateZ(2.75rem) }
@keyframes klix-s-dice { 0% { transform: rotateX(0) rotateY(0) }
  30% { transform: rotateX(-450deg) rotateY(270deg) }
  60% { transform: rotateX(-810deg) rotateY(450deg) }
  100% { transform: rotateX(-1080deg) rotateY(720deg) } }