תלת-ממד ו-CSS

Paul Kinlan

מבוא

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

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

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

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

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

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

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

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

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

סיכום

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