מבוא
במשך תקופה ארוכה מאוד, מוצרי התלת-ממד שימשו כשימור של אפליקציות למחשבים שולחניים. לאחרונה, עם השקת סמארטפונים מתקדמים עם גישה לשיפור המהירות של GPU, התחלנו לראות שימוש בתלת-ממד כמעט בכל מקום.
לרוב, תלת-ממד משמש בעיקר כמכשיר לגיימינג או לכמה ממשקי משתמש מתקדמים. רק השימוש בתכונה'טרנספורמציה' של פרספקטיבה ב-WPF וב-Silverlight, מודל מתאים להחלת אפקטים תלת-ממדיים על רכיבים בממשק המשתמש הפך לפתרון מעשי עבור מפתחי אפליקציות (אחרי שכל השימוש בתלת-ממד אינו קל בדיוק).
מודל הטרנספורמציה התלת-ממדית ב-CSS הושק כמפרט טיוטה במרץ 2009 כדי לאפשר למפתחי אתרים ליצור ממשקי משתמש מעניינים ומושכים שמנצלים את התלת-ממד. כדי לעשות זאת, מפתחי אפליקציות יכולים להחיל טרנספורמציות פרספקטיבה תלת-ממדיות על כל רכיב DOM חזותי.
טיוטת עבודה לטרנספורמציה בתלת-ממד ב-CSS היא הרחבה לוגית למודל הטרנספורמציה הדו-ממדית של CSS, שכוללת כמה מאפיינים נוספים, כולל: נקודות מבט, סיבובים ושינויי טרנספורמציה בשטח תלת-ממדי.
מעולם לא יכולנו לבנות ממשקים תלת ממדיים כל כך בקלות. הטכנולוגיות האלה הסירו את חסמי הכניסה. כבר לא צריך להיות קוסמטיקה מתמטית כדי לבנות אלמנטים תלת-ממדיים.
חשוב לציין שמודול CSS לתלת-ממד נועד לעזור למפתחים ליצור אפליקציות עשירות ומעניינות מבחינה ויזואלית, והוא לא נועד לאפשר לכם לבנות עולמות תלת-ממדיים עשירים.
תמיכה בדפדפן והאצת חומרה
-webkit-perspective
-webkit-transform-3d
הדבר החשוב שצריך לזכור הוא שגם אם הדפדפן "יתמוך" בתלת-ממד, ייתכן שהוא לא יוכל להציג תלת-ממד עקב מגבלות החומרה ומנהל ההתקן. סצנות תלת ממדיות המבוססות על DOM עשויות להיות יקרות מאוד מבחינה חישובית, ולכן ספקי הדפדפנים החליטו במקום להאט את הדפדפנים בעזרת פתרון פשוט לעיבוד תוכנה. במקום זאת, הם ינצלו את ה-GPU שעשוי לא להיות זמין בכל הפלטפורמות
זיהוי תכונה
מה לגבי זיהוי תכונות? קיוויתי שלא התכוונת לשאול! מפתחים משתמשים בכלים כמו Modernizr כדי לזהות תמיכה בתכונות וביכולות ספציפיות של הדפדפן. אף על פי שניתן לזהות את קיומו של תמיכה בטרנספורמציות תלת-ממדיות, לא ניתן לזהות אם יש תמיכה בשיפור מהירות באמצעות חומרה. שיפור המהירות באמצעות חומרה הוא המרכיב העיקרי.
דוגמה בסיסית
אין דבר יותר טוב מלקפוץ פנימה. בדוגמה הזו נחיל קבוצה בסיסית של סיבובים של רכיב DOM שרירותי.
נתחיל מהגדרת נקודת מבט על רכיב השורש.
<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">
נקודת המבט חשובה כי היא מגדירה את אופן העיבוד של העומק של סצנת התלת-ממד, הערכים מ-1 עד 1,000 ייצרו אפקט בולט מאוד וערכים של יותר מ-1,000 פחות. לאחר מכן אנחנו מוסיפים iframe ומחילים סיבוב של 30 מעלות סביב ציר ה-Z ו-Y
<iframe
src="http://www.html5rocks.com/"
style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>
בום! זהו, האלמנט הוא אינטראקטיבי לחלוטין ובכל מובן. זהו רכיב DOM קיים במלואו (אלא שעכשיו הוא נראה אפילו מדליק יותר). אם הדפדפן שלך לא תומך בטרנספורמציות תלת-ממדיות, לא יקרה כלום. פשוט תראו iframe פשוט שלא הוחל עליו סבב. אם הדפדפן שלך תומך בטרנספורמציות תלת-ממדיות אבל ללא שיפור מהירות באמצעות חומרה, הוא עשוי להיראות קצת מוזר.
אנימציה
מה שאני אוהבת בטרנספורמציות תלת-ממדיות של CSS3 הוא שהן קשורות כל כך יפה למודול המעבר של CSS. קל להגדיר אנימציות ומעברים ב-CSS, והחלה שלהם על תלת-ממד אינה יוצאת מן הכלל.
קל להוסיף אנימציה לרכיבים בעלי פרספקטיבה תלת-ממדית. פשוט מגדירים את סגנון "transition" כ "טרנספורמציה", מצרפים משך זמן ופונקציית אנימציה. לאחר מכן, כל שינוי בסגנון ה "tranform" יונפש.
שילבנו מחדש את הדוגמאות הקודמות כדי להשתמש בסגנונות מסמכים במקום בסגנונות בתוך שורה. לא רק שהדוגמה מבהירה את הדוגמה, היא גם מאפשרת לדגום להשתמש בפסאודו סלקטור :hover. באמצעות הבורר :hover, ניתן להתחיל מעברים על ידי הזזת העכבר מעל הרכיב. נפלא!
סיכום
זו הצצה חטופה בכמה מהאפקטים המגניבים שניתן להחיל על כל רכיב DOM גלוי באמצעות טרנספורמציות CSS 3D. יש עדיין הרבה דברים שאפשר לעשות שלא עסקנו במדריך הזה.