CSS3 transform

CSS transform הוא תכונה של CSS3 שנתמכת בכל הדפדפנים ומאפשרת לנו לקחת אלמנט כלשהו (מסוג כלשהו) ולשנות את צורתו לחלוטין כאשר השינויים נעשים לאלמנט ולילדיו באופן אוטומטי.

למשל, בואו וניקח את האלמנט החביב הזה:

מדובר ב-div שיש לו class מסוים שאלו התכונות שלו:

.all_divs {
	background-color: red;
	color: white;
	height: 100px;
	width: 100px;
}

נניח ואני רוצה להגדיל אותו ב-20 אחוז. איך אני יכול לעשות את זה? בגדול, אני יכול לשנות את הערכים שלו ושל בניו (אם יש כאלו), אבל אני יכול לעשות משהו כזה:

שימו לב שהכל גדל ב-20 אחוז בדיוק – הרוחב, הגובה וגם האלמנט הפנימי – במקרה הזה הטקסט. איך עשיתי את הפלא הזה? באמצעות שימוש בתכונת CSS בשם scale שמתשייכת ל-transform. מדובר בסינטקס של פונקציה (זהה למדי ל-SASS או LESS) שמקבלת שני פרמטרים – השינוי בגובה באחוזים והשינוי ברוחב באחוזים. במקרה שלנו, מדובר במשהו כזה:

#mydiv02 {
	transform: scale(1.2,1.2); 
}

פונקציות rotate מסובבת את האלמנט, היא מקבלת פרמטר של מעלות כאשר אני יכול להכניס מ-0 עד 360 במקרה של סיבוב עם כיוון השעון או מ0 עד מינוס 360 במקרה של סיבוב נגד כיוון השעון. למספר מוסיפים את המילה deg מלשון degree (מעלות).

וכך נראה הקוד כמובן:

#mydiv03 {
	transform: rotate(20deg); 
}

הטיה – skew

אני יכול להטות את האלמנט שלי בציר ה-X או בציר ה-Y באמצעות פונקצית skew. גם היא מקבלת פרמטרים של 0 עד 90 מעלות להטיה חיובית ומינוס 90 מעלות להטיה שלילית. (אפשר להכניס כל מעלה שהיא, אבל בגדול זה תמיד יחזור על עצמו כל 180 מעלות) הכל יותר טוב עם דוגמה, למה אני מתכוון כשאני אומר הטיה בציר ה-X? אני מתכוון לדבר כזה:

והקוד נראה כך:

#mydiv04 {
	transform: skew(30deg, 0deg); 
}

הטיה שלילית על ציר ה-X תראה די זהה, רק הפוך:

והנה דוגמה של הקוד:

#mydiv05 {
	transform: skew(-30deg, 0deg); 
}

הטיה על ציר ה-Y היא בדיוק כמו על ציר ה-X, רק כמובן על ציר שונה. הנה דוגמה של הטיה חיובית על ציר ה-Y:

וכך נראה הקוד:

#mydiv06 {
	transform: skew(0deg, 30deg); 
}

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

והנה הדוגמה:

#mydiv07 {
	transform: skew(0deg, -30deg); 
}

כמובן שאנחנו יכולים לשלב גם הטיה על ציר ה-Y וגם הטיה על ציר ה-X.

translate – הזזת מיקום

פונקציה נוספת שאפשר להשתמש בה היא translate שמשמשת אותנו להזזת האלמנט. היא מקבלת שני ארגומנטים בפיקסלים – גובה ורוחב והיא מזיזה את האלמנט יחסית לגובה המקורי שלו, כאשר הארגומנט הראשון הוא מספר הפיקסלים משמאל (שלילי על מנת להזיז ימינה) והארגומנט השני הוא מספר הפיקסלים למטה (שלילי על מנת לקבוע למעלה). כאן למשל, אני מזיז את האלמנט חמישים פיקסלים לימין ועשרים פיקסלים למטה.

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

#mydiv08 {
	transform: translate(-50px,20px); 
}

אלו מכם שקצת מנוסים ב-CSS יכולים לשאול, לגמרי בצדק, מה ההבדל בין translate לבין position: relative. זו שאלה מצוינת שהתשובה אליה בעצם קשורה לשאלה אחרת:

מה עושים עם הדבר הזה?

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

התשובה נעוצה בשני המאמרים האחרונים שפרסמתי בנושא CSS3 – אנימציות ו-transitions. למשל – אם אני רוצה שכאשר אני עובר על אלמנט בתפריט, תהיה אנימציה שבה הוא יגדל מעט. ואם אני לוחץ עליו, הוא ירטוט מעט. ואם אני עובר על גלגל שיניים, שהוא יסתובב – את זה עושים בשילוב של אנימציה. הנה דוגמה:

זה נעשה עם הקוד הפשוט הבא:

#cogwheel_anim {
	animation:spin 4s linear infinite;
	background-color: transparent;
	background-repeat: no-repeat;
	height: 48px;	
	width: 48px;
}
@keyframes spin { 
    100% { transform:rotate(360deg); } 
}

בלי שיכולנו לפרט לאלמנט להסתובב באמצעות שורה אחת, לא היינו יכולים לעשות את האנימציה הזו באמצעות CSS. כנ”ל בנוגע לאינספור אנימציות אחרות – גדילה קטנה של האלמנט בתפריט, תזוזה של אייקון למשיכת תשומת לב, פעימת לב והמון דברים אחרים שחיוני להכיר את transform עבורם. וגם אם אתם (אהם אהם) מחפשים את האנימציות ברשת במקום לבנות אותן בעצמכם, כדאי להכיר את הפרמטרים כדי שתוכלו לשנות אותם על מנת להתאים את האנימציות לצרכים שלכם.
בדיוק בשביל זה יש את translate. כשאנו יוצרים את האנימציה או את ה-transition, אנחנו לא תמיד יודעים איזה אלמנט ישתמש בה. לפעמים אם בשביל תזוזה מסוימת נשתמש ב position: relative, זה עלול לגרור תוצאות לא צפויות. Transform הוא דרך שלא מושפעת מה-position של האלמנט או אלמנט האב שלו והיא אידיאלית לאנימציות או transitions. בגלל זה כדאי להכיר אותה.

ואם מדברים על דברים שכדאי להכיר… יש עוד דבר אחר ב-transform שכדאי להכיר והיא: matrix – מסתבר שיש דבר כזה! אם אנחנו רוצים לשלב כמה טרנספורמציות, אנו יכולים להשתמש בפונקצית matrix שמקבלת שישה ארגומנטים של מטריצה. יום יבוא ואולי אני אסביר על מטריצות באופן מקיף, אבל זה לא יהיה במאמר הזה.