אחת ההגדרות המורכבות והמקסימות שCSS3 מביא לנו היא ההגדרה transform.
באופן כללי, ההגדרה מסוגלת לשנות דברים בנראות של סלקטור/ים, אך השינוי הוא רק בנראות של האלמנט ולא במהות שלו. שינוי חיצוני בלבד.
לדוגמא הגדרת שינוי גודל (scale) – מגדילה את האלמנט כמו בזכוכית מגדלת. כלומר, האלמנט + כל האלמנטים שבתוכו גדלים באחוז מסוים.
מבחינת נראות – נראה שהאלמנט אכן גדל. אך מכל בחינה אחרת האלמנט נותר בגודלו המקורי; האלמנטים שסביבו קולטים אותו בגודל המקורי, וכן פונקציות JS שנועדו למצוא גודל – קולטות את הגודל המקורי שלו ולא לוקחות בחשבון את הטרנספורמציה שעבר האלמנט.
פונקציות הtransform מתחלקות לפונקציות דו מימדיות ופונקציות תלת מימד. נסקור כאן חלק מהפונקציות של transform, הנפוצות שבהן.
את הרשימה המלאה אפשר לקרוא ב w3schools.
רק לפני שאנחנו צוללות פנימה, שימי ❤️שכשנותנים הגדרה באחוזים או בלי יחידת מידה – השינוי יהיה ביחס לפריט עצמו. 1 = 100%. לדוגמה אם ניתן 2 – הכוונה לפי 2 מהגודל המקורי של האלמנט.
למה להשתמש בtransform?
את רוב הטרנספורמציות אפשר לבצע גם באמצעות הגדרות CSS אחרות, אז למה להשתמש דווקא בtransform?
קודם כל – זה כל כך נוח!
אבל בעיקר – כאשר משתמשים באנימציות (animations / transition) – הדפדפן מרנדר את השינויים של transform בקלות רבה יותר מאשר שינויים אחרים.
לכן נשתדל מאד שכשאפשר – נממש את האנימציות באמצעות transform דווקא.
scaleX, scaleY, scale – שינוי גודל
ההגדרה scale מסוגלת לשנות לנו את הגודל של האלמנט.
- scaleX – ישנה את הרוחב של של האלמנט.
- scaleY – ישנה את הגובה של האלמנט.
- scale – ישנה את שתיהם.
scale – תחביר
transform: scaleX(num);
transform: scaleY(num);
transform: scale(num); /*ישנה את הגובה וגם את הרוחב באותו יחס*/
transform: scale(x,y);באפשרות האחרונה – המשתנה הראשון בסוגריים מגדיר בכמה אחוזים להגדיל את הרוחב, והשני – בכמה אחוזים להגדיל את האורך.
אם נגדיר מספר שלילי – הפריט יתהפך על אותו ציר.
דוגמאות לscale
transform: scaleX(1.5); /* יכפיל את הרוחב פי 1.5 */
transform: scaleY(0.5); /* יקטין את הגובה בחצי */
transform: scale(50px); /* יוסיף 50 פיקסלים לגובה ולרוחב */
transform: scale(2,4); /* יכפיל את הרוחב פי 2 ואת הגובה פי 4 */translateX, translateY, translate – הזזה
ההגדרה translate מסוגלת להזיז לנו את האלמנט על המסך. נדגיש שוב, שאר האלמנטים על המסך לא מודעים לתזוזה של האלמנט ומבחינתם הוא נשאר במקום המקורי, לכן נוח להשתמש בהגדרה הזו עבור אפקטים שונים של תזוזה, לדוגמה כניסה של קומה עם מעט תזוזה, תפריט שנפתח ובפתיחה הוא מעט עולה, פופאפ שעולה בכניסה שלו ועוד. כך האלמנט זז אך לא משפיע על הסביבה והאפקט עובד נפלא.
translate – תחביר
transform: translateX(num); /* תזוזה על ציר האיקס */
transform: translateY(num); /* תזוזה על ציר הוואי */
transform: translate(x,y); /* תזוזה שונה לכל ציר */נקודת המוצא היא תמיד הנקודה השמאלית העליונה, ולכן אם נרצה להזיז ימינה – נגדיר translateX עם מספר חיובי, ואם נרצה להזיז שמאלה נגדיר translateX עם מספר שלילי. כנ"ל לגבי למעלה ולמטה. למטה נגדיר מספר חיובי וללמעלה – מספר שלילי.
שימי ❤️ שאם להגדיר translate תגדירי רק ערך אחד בסוגריים – האלמנט יזוז רק על ציר הX ולא על ציר הY.
דוגמאות לtranslate
transform: translateX(0.5); /* יזיז את האלמנט ימינה בחצי מגודלו */
transform: translateY(50px); /* יוריד את האלמנט 50 פיקסלים */
transform: translate(-50%, -50%); /* יזיז את האלמנט למעלה ושמאלה במחצית מהגודל */
transform: translate(-20px, -100%); בדוגמה האחרונה האלמנט יזוז לנו 20 פיקסלים שמאלה וכן כלפי מעלה – יזוז למרחק השווה לגובה שלו. כלומר הנקודה שקודם הייתה הנקודה העליונה – עכשיו תהיה התחתונה.
יישור למרכז
ההגדרה translate יכולה לשמש אותנו כאשר אנחנו צריכים ליישר למרכז פריטים עם position נעוץ עו אבסולוטי. במקרים כאלה אי אפשר להשתמש בflex כדי ליישר את הפריטים. במקום זה ניתן לפריט הפנימי את ההגדרות הבאות:
position: fixed; /* או absolute */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);ההגדרות top, left יישרו את החלק העליון והשמאלי של הפריט הפנימי לאמצע של האלמנט העוטף (או האמצע של המסך, אם מדובר בposition: fixed), אבל האלמנט לא יהיה מיושר לאמצע, אלא יהיה עם הזחה למטה וימינה. כדי ליישר את זה – נשתמש בtransform. הוא מאפשר לנו להזיז את האלמנט ביחס לעצמו ולא ביחס לאבא שלו, וכך מאפשר לנו למרכז אותו. נסי ותהני 🙂
rotate – סיבוב
ההגדרה rotate תסובב לנו את האלמנטים. יש להגדיר בכמה מעלות לסובב את האלמנט. אני אוהבת להשתמש בה כשיש למשל אקורדיון עם אייקון כזה >, וכשהאקורדיון פתוח האייקון הפוך, כך שהחץ שלו פונה כלפי מטה. עם transform-rotate זה נפלא וקל למימוש, ואם מוסיפים transition – החץ מסתובב עם אנימציה שזה בכלל נפלא.
rotate – תחביר
transform: rotate(angel);בסוגריים עלינו להגדיר את הזווית שבה אנחנו רוצים לסובב את האלמנט. זה יהיה תמיד מספר ואז יחידת המידה deg, קיצור של המילה degrees = מעלות. כמה מעלות רוצים לסובב. מחזיר אותנו קצת לשיעורי הנדסה וחישובי זוויות.
כמו בכל הגדרות הCSS שלמדנו עד היום, גם כאן מספרים חיוביים יסובבו משמאל לימין, בכיוון השעון, ומספרים שליליים יסובבו שמאלה, נגד כיוון השעון.
דוגמאות לrotate
transform: rotate(90deg); /* יסובב את האלמנט ימינה בזווית ישרה */
transform: rotate(-45deg) /* יסובב את האלמנט 45 מעלות שמאלה */יותר מטרנספורמציה אחת לאלמנט
יש אפשרות לתת יותר מטרנספורמציה אחד לאותו אלמנט. לדוגמה גם הזזה וגם סיבוב. נכתוב את זה באופן הבא:
transform: rotate(90deg) translate(10px, 10px);אין צורך להוסיף פסיקים בין ההגדרות, אלא כותבים אותן בשורה אחת.