מבט לתוך CSS3 2D טרנספורמציות

מאמר זה הוא חלק שלנו "HTML5 / CSS3 סדרת הדרכות" - ייעודי כדי לעזור לך לעשות מעצב טוב יותר ו / או מפתח. לחץ כאן כדי לראות מאמרים נוספים מאותה סדרה.

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

יש כמה ניסויים שמדהים אותי באמת, דוגמאות כמו זו. עם זאת, אנחנו לא הולכים לבנות משהו כמו סמל CSS בלבד שיכול איכשהו להפוך אוטובוט, כפי שהוא עשוי להיות מוחץ ולא ממש שמיש בחיים האמיתיים, כמו גם.

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

התחביר

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

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

 transform you method (ערך); / * W3C תחביר רשמי * / -o-transform: שיטה (ערך); / * Opera 10.5+ / / -ms-transform: method (value); / * Internet Explorer 9.0+ * / -moz-transform: method (value); / * Firefox 3.6+ / / -webkit-transform: method (value); / * Chrome / Safari 3.2+ * / 

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

הערך

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

למעט סיבובים. ה סיבוב ישתמש קואורדינטות קוטביות אשר באה לידי ביטוי במעלות הנעות בין 0 ל 360.

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

באמצעות טרנספורמציות

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

אני מתרגם

אל תהיה מעונן עם המונח לתרגם, זה לא יתורגם בשפה זרה. ה לתרגם הנה למעשה שיטה להעברת אלמנטים בכיוון כלשהו.

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

עכשיו, בואו לראות כמה הפגנות פשוטים להלן:

 div width: 100px; גובה: 100px; להפוך: לתרגם (100px, 250px);  

קטע הקוד לעיל יעביר את הרכיב עבור 100px ימינה ו 250 פיקסלים לתחתית.

 div width: 100px; גובה: 100px; להפוך: לתרגם (100px, 0);  

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

 div width: 100px; גובה: 100px; שנה: תרגם (-100 פיקסלים, 0);  

• "תרגום" הדגמה

לחלופין, אנו יכולים להעביר את האלמנט בכיוון אחד עם שיטות בודדות אלה; translateX () ו תרגםY (), ההבדל הוא שכל אחת משיטות אלה מקבלת רק ערך אחד.

אז, למעשה, את שנה לתרגם (-100 פיקסלים, 0) הוא גם שווה שנה: translateX (-100 פיקסלים).

II - סולם

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

 div width: 100px; גובה: 100px; צורה: סולם (1.5);  

הדוגמה לעיל יגדיל את div 1.5 או 150% מגודלה האמיתי, ומאז אנחנו בקנה מידה שווה עבור שניהם X ו- Y כיוונים, אנחנו רק צריכים להכריז על זה ערך אחד. אתה יכול גם להכריז על זה בדרך זו צורה: סולם (1.5,1.5); אם אתה רוצה ללכת יותר פרטים, זה יהיה פשוט לעשות את אותו הדבר.

יתר על כן, אם אנחנו רוצים להפחית את הרכיב היינו משתמשים באופן ספציפי בערך מ -0.999 עד 0 מוחלט, כמו למשל להלן, אשר יפחית את הגודל של div עבור 50% או חצי:

 div width: 100px; גובה: 100px; צורה: סולם (0.5);  

אבל, להיות זהירים, אם אתה מגדיר את הערך להיות מוחלט “0” ה div פשוט תיעלם, אז אם אין לך סיבה חוקית לעשות זאת, לא הייתי ממליץ לעשות זאת.

• "קנה מידה" הדגמה

III - סובב

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

קטע הקוד להלן יסובב את div 30 מעלות בכיוון השעון.

 div width: 100px; גובה: 100px; להפוך: לסובב (30deg);  

ערך שלילי, כפי שמוצג בדוגמה שלהלן, יסתובב div בכיוון הנגדי (נגד כיוון השעון) באותה מידה.

 div width: 100px; גובה: 100px; להפוך: לסובב (-30deg);  

• "סובב" הדגמה

IV - הטיה

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

 div width: 200px; גובה: 100px; המרה: skew (30deg, 10deg);  

• "הדגשה"

שיטה מרובת

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

 div width: 100px; גובה: 100px; להפוך: translateX (100px) לסובב (45deg);  

הקטע הנ"ל יעביר את האלמנט 100px ימינה ובאותו זמן הוא גם מסתובב 45 מעלות.

"שיטה מרובת" הדגמה.

להפוך את המקור

ה מקור מוצא - כפי ששמו מרמז - משמש כדי לשלוט על נקודת המוצא של השינוי. אם לא נכריז במפורש על נכס זה בתחביר הבא המרה-מוצא: X Y;, אז הדפדפן ייקח את ערך ברירת המחדל שהוא 50% עבור X ו- 50% עבור Y.

עכשיו, אם נציין את מקור השינוי 0 (X) 0 (Y) השינוי יתחיל בפינה השמאלית העליונה.

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

 -webkit-transform-origin: X Y; -Moz-transform-origin: X Y; -o-transform-origin: X Y; -ms-transform-origin: X Y; המרה-מוצא: X Y; 

• "שינוי מקור" הדגמה

סיכום

עברנו את כל ארבע שיטות השינוי המהותיות; לתרגם, קנה המידה, לסובב ו להטות

עם זאת, כאמור, מודול זה עדיין בשלב מוקדם, כך שאם תשתמש בשיטות אלה באתר האינטרנט הבא שלך, ודא שהוא מבזה בחן עבור דפדפנים שאינם תואמים (אני לא מתכוון IE6 כאן).

לבסוף, ניתן להציג את כל ההדגמה או להוריד את המקור מהקישורים הבאים.

• הדגמה
• הורד מקור