תלת-ממד ו-CSS

Paul Kinlan

מבוא

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

בדרך כלל, 3D משמש בעיקר כמכשיר למשחקים או בממשקי משתמש מתקדמים מסוימים. רק לאחר ההשקה של טרנספורמציות תצוגת תלת-ממד ב-WPF וב-Silverlight, מודלים מתאימים להוספת אפקטים תלת-ממדיים לרכיבי ממשק המשתמש הפכו לפתרון מעשי למפתחי אפליקציות (אחרי הכל, תלת-ממד הוא לא קל במיוחד).

מודל הטרנספורמציה התלת-ממדית של CSS הוצג כטיוטת מפרט במרץ 2009 כדי לאפשר למפתחי אינטרנט ליצור ממשקי משתמש מעניינים ומרתקים שמנצלים את היתרונות של תלת-ממד. הטרנספורמציות מאפשרות לכותבי אפליקציות להחיל טרנספורמציות תלת-ממדיות של פרספקטיבה על כל רכיב DOM חזותי.

טיוטת העבודה של טרנספורמציות תלת-ממד ב-CSS היא הרחבה לוגית של מודל הטרנספורמציות הדו-ממדיות ב-CSS, ומציגה מאפיינים נוספים, כולל: נקודות מבט, רוטציות וטרנספורמציות במרחב תלת-ממדי.

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

חשוב לציין שהמודול של CSS 3D נועד לעזור למפתחים ליצור אפליקציות עשירות ומעניינות מבחינה חזותית, והוא לא נועד לאפשר לכם ליצור עולמות תלת-ממדיים שאפשר להיכנס אליהם.

תמיכה בדפדפנים ושיפור המהירות באמצעות חומרה

-webkit-perspective

תמיכה בדפדפנים

• 36
• 12
• 16
• 9

מקור

-webkit-transform-3d

תמיכה בדפדפנים

• 2
• 12
• 49
• 4

מקור

חשוב לזכור: גם אם דפדפן מסוים 'תומך' בתלת-ממד, יכול להיות שהוא לא יוכל ליצור עיבוד גרפי תלת-ממדי בגלל מגבלות בחומרה ובמנהלי ההתקנים. סצנות תלת-ממדיות שמבוססות על DOM יכולות להיות יקרות מאוד מבחינה חישובית, ולכן יצרני הדפדפנים החליטו שבמקום להאט את הדפדפנים באמצעות פתרון עיבוד גרפי (rendering) שמבוסס על תוכנה בלבד, הם ישתמשו ב-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' כ-'transform', מצרפים משך זמן ופונקציית אנימציה. מעכשיו ואילך, כל שינוי בסגנון 'טרנספורמציה' יתבצע באמצעות אנימציה.

שינינו את הדוגמאות הקודמות כך שישתמשו בסגנונות מסמך במקום בסגנונות מוטמעים. השינוי הזה לא רק מבהיר את הדוגמה, אלא גם מאפשר לדוגמה לנצל את הסלקטור המזויף :hover. באמצעות הבורר :hover, אפשר להתחיל מעברים פשוט על ידי החלקת העכבר מעל הרכיב. מדהים!

סיכום

זו הייתה רק הצצה מהירה לחלק מהאפקטים המגניבים שאפשר להחיל על כל רכיב DOM גלוי באמצעות טרנספורמציות 3D ב-CSS. יש עוד הרבה דברים שאפשר לעשות ולא התייחסנו אליהם במדריך הזה.