כיצד לשנות צורה באמצעות 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);וכך זה נראה, התיבה בגודלה המקורי משמאל, בגודל כפול באמצע, ובגודל של מחצית מימין.
אפשר לראות שההשפעה היא על הרוחב והאורך, עובי ה-border והטקסט.
ניתן לשנות את גודלו של ציר ה-x בנפרד מציר ה-Y, אם מוסיפים שני ערכים ל-scale. ערך שמאלי משנה את רוחבו של האלמנט, וערך ימני את גובהו של האלמנט. לדוגמה:
transform: scale(0.5, 2);משמעות הקוד היא להקטין פי-2 את האלמנט לרוחבו (ציר ה-x), ולהגדיל פי-2 את גובהו של האלמנט (ציר ה-y). כך זה נראה:
ושוב אנחנו רואים את ההשפעה על ממדיו של האלמנט, הטקסט ועובי ה-border.
כדי לשנות את כוונה של התיבה, אפשר להשתמש ב-rotate עם ערך במעלות, deg. לדוגמה:
transform: rotate(20deg);ייתן לתיבה הטיה של 20 מעלות כלפי מטה. כפי שניתן לראות בתמונה:
ניתן לשנות את צורתה של התיבה ממלבן למקבילית, אם משתמשים ב-skew. לדוגמה:
transform: skew(10deg);
כדי לגרום להזזת הצורה משתמשים ב-translate, שמקבל שני ערכים. השמאלי, ממקם מחדש התיבה בציר ה-x (ערך חיובי מזיז ימינה ושלילי שמאלה), והערך הימני מזיז בציר ה-Y (ערך חיובי כלפי מטה, וערך שלילי כלפי מעלה). לדוגמה, הקוד הבא שמזיז את האלמנט 10 פיקסלים ימינה ו-100 פיקסלים למטה.
transform: translate(10px,100px);
שילוב מספר ערכים יתבצע באותה שורה, ולא בשורות נפרדות. את הערכים מפרידים באמצעות מרווח אחד. לדוגמה:
transform: scale(0.5,2) rotate(20deg) skew(45deg) translate(50px,100px);
במדריך הבא אנימציות מדליקות באמצעות CSS3 נלמד כיצד לעשות אנימציות מדליקות
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.