אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » CSS3 » CSS3 transform

CSS3 transform

רן בר-זיק יוני 21, 2015 7:07 am אין תגובות

שינוי אלמנטים בשני מימדים באמצעות CSS בלבד. לא תאמינו מה אפשר לעשות.

»CSS3 transition
»תחיליות והטיפול בהן
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

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

This is my Div

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

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

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

This is my Div

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

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

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

This is my Div

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

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

הטיה – skew

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

This is my Div

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

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

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

This is my Div

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

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

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

This is my Div

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

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

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

This is my Div

והנה הדוגמה:

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

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

translate – הזזת מיקום

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

This is my Div

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

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
CSS3

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

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

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד