נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

כיצד לשנות צורה באמצעות transform?

מחבר:
בתאריך:

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

התחביר של transform הוא:

transform: <property>

<property> מגדיר את התכונה לשינוי, וזה כולל:

משמעותה התכונה
הגדלת או הקטנת האלמנט transform: scale()
מטה את האלמנט transform: rotate()
הופך מלבן למקבילית transform: skew()
משנה את מיקום האלמנט על המסך transform: translate()

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

transform: scale(2);

ודוגמת הקוד הבאה מקטינה את האלמנט פי-2.

transform: scale(0.5);

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

CSS3 שינוי גודל אלמנט עם scale

אפשר לראות שההשפעה היא על הרוחב והאורך, עובי ה-border והטקסט.

 

ניתן לשנות את גודלו של ציר ה-x בנפרד מציר ה-Y, אם מוסיפים שני ערכים ל-scale. ערך שמאלי משנה את רוחבו של האלמנט, וערך ימני את גובהו של האלמנט. לדוגמה:

transform: scale(0.5, 2);

משמעות הקוד היא להקטין פי-2 את האלמנט לרוחבו (ציר ה-x), ולהגדיל פי-2 את גובהו של האלמנט (ציר ה-y). כך זה נראה:

CSS3 שינוי גודל אלמנט עם scale ציר x ציר y

ושוב אנחנו רואים את ההשפעה על ממדיו של האלמנט, הטקסט ועובי ה-border.

 

כדי לשנות את כוונה של התיבה, אפשר להשתמש ב-rotate עם ערך במעלות, deg. לדוגמה:

transform: rotate(20deg);

ייתן לתיבה הטיה של 20 מעלות כלפי מטה. כפי שניתן לראות בתמונה:

CSS3 הטיית תיבה במספר מעלות rotate

ניתן לשנות את צורתה של התיבה ממלבן למקבילית, אם משתמשים ב-skew. לדוגמה:

transform: skew(10deg);

CSS3 מלבן במקום מקבילית skew

 

כדי לגרום להזזת הצורה משתמשים ב-translate, שמקבל שני ערכים. השמאלי, ממקם מחדש התיבה בציר ה-x (ערך חיובי מזיז ימינה ושלילי שמאלה), והערך הימני מזיז בציר ה-Y (ערך חיובי כלפי מטה, וערך שלילי כלפי מעלה). לדוגמה, הקוד הבא שמזיז את האלמנט 10 פיקסלים ימינה ו-100 פיקסלים למטה.

transform: translate(10px,100px);

CSS3 שינוי מיקום אלמנט translation

 

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

transform: scale(0.5,2) rotate(20deg) skew(45deg) translate(50px,100px);

 

 

במדריך הבא אנימציות מדליקות באמצעות CSS3 נלמד כיצד לעשות אנימציות מדליקות

הוסף תגובה חדשה

 

= 4 + 7