חדר איזומטרי

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

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

.klix-s-room { perspective: 900px; width: 9rem; height: 8rem }
.klix-s-room > div { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-42deg); animation: klix-s-room 12s linear infinite }
.klix-s-room i { position: absolute; inset: 0; background: #334155; border: 1px solid #64748b }
.klix-s-room b { position: absolute; width: 2.4rem; height: 2.4rem; background: #6366f1;
  border: 1px solid #a5b4fc; left: 1.2rem; top: 1.6rem; transform: translateZ(1.2rem) }
.klix-s-room em { position: absolute; width: 1.6rem; height: 1.6rem; background: #f59e0b;
  border: 1px solid #fcd34d; right: 1.2rem; bottom: 1.4rem; transform: translateZ(.8rem) }
@keyframes klix-s-room { to { transform: rotateX(56deg) rotateZ(318deg) } }