במאמר זה נבין את Transform In בפירוט ובצע אותה בהדגמה מעשית מפורטת. המצביעים הבאים יוסקרו במאמר זה,
עם ההתקדמות בפונקציות האתר, חשוב באותה מידה לספק אינטגרציות חכמות באתר שלך כדי להפוך אותו למושך וטוב יותר. הוספת אלמנטים שונים של CSS שמחמיאים לאתר שלך הם צורך השעה.
אנשים נשארים מחוץ לאתרים שלא ממש מושכים את ההמונים. אז מה דעתכם לנסות להפוך חלק מהאלמנטים ולייפות את ה- CSS שלכם עם ערך דחיסה נמוך יותר.
כדי למלא צרכים דומים, יש לנו להפוך את מאפיין CSS שהופך אלמנטים על ידי הטייה, סיבוב, שינוי גודל או תרגום שלהם.
ערימה וערמה בג'אווה
ממשיכים במאמר זה בנושא Transform In CSS
מהי טרנספורמציה CSS?
שינוי אלמנט CSS פירושו לספק לו יתרון בצורה דו-ממדית או תלת-ממדית. זה משנה חזותית את העיצוב של אלמנט.
טרנספורמציה דו-ממדית עובדת על צירי X ו- Y. אתה יכול לספק כל קצה או מבנה בשני הצירים כדי לבצע שינויים. בעוד שעבור טרנספורמציה תלת-ממדית הוא צריך לעבוד על צירי X, Y כמו גם Z כדי לספק את העומק הדרוש.
מאפייני טרנספורמציה 2D של CSS:
| פוּנקצִיָה | תיאור |
מַטרִיצָה( n, n, n, n, n, n ) | מטריצה של שישה ערכים |
לתרגם( x, y ) | מאפשר לאלמנט לנוע לאורך ציר ה- X וציר ה- Y |
תרגם X ( נ ) | מאפשר לאלמנט לנוע לאורך ציר ה- X |
תרגם Y ( נ ) | מאפשר לאלמנט לנוע לאורך ציר Y |
סוּלָם( x, y ) | משנה את רוחב וגובה האלמנטים |
scaleX ( נ ) | משנה את רוחב האלמנט |
קנה מידה ( נ ) | משנה גובה אלמנטים |
להתחלף( זָוִית ) | מאפשר לסובב את האלמנט בזווית שצוינה בפרמטר |
לְסַלֵף( זווית x, זווית y ) | מעקם את האלמנט לאורך ציר ה- X וציר ה- Y |
skewX ( זָוִית ) | מעקם את האלמנט לאורך ציר ה- X |
עקום ( זָוִית ) | מעקם את האלמנט לאורך ציר Y |
מאפייני טרנספורמציה של CSS 3D:
תכונה | תיאור |
שינוי צורה | מחיל טרנספורמציה דו-ממדית או תלת-ממדית על אלמנט |
שינוי-מקור | מאפשר לך לשנות את המיקום על אלמנטים שהשתנו |
טרנספורמציה בסגנון | מציין כיצד אלמנטים מקוננים מעובדים בחלל תלת ממדי |
נקודת מבט | מציין את נקודת המבט על האופן בו נראים אלמנטים תלת ממדיים |
פרספקטיבה-מקור | מציין את המיקום התחתון של אלמנטים תלת-ממדיים |
נראות אחורית | מגדיר אם אלמנט צריך להיות גלוי או לא כאשר הוא לא פונה למסך |
לדוגמה:
אלמנט css {רוחב: 20 פיקסלים גובה: 20 פיקסלים טרנספורמציה: קנה מידה (20)}כעת, כאשר תעשה זאת, האלמנט המוגדר יוגדל פי 20.
לא רק זאת, אתה יכול גם לשנות את קנה המידה בצורה חכמה עבור קנה המידה האופקי וקנה המידה האנכי.
transform: scaleX (2) transform: scaleY (.5)
כדי לספק טרנספורמציה נכונה בכל הדפדפנים תוכל:
div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: scale (1.5)}מאפיין ה- transform CSS משפר את שטח הקואורדינטות של רמת העיצוב החזותי של CSS.
מהי רמת העיצוב החזותי?
רמת עיצוב חזותית פירושה עיבוד מסמך והצגתו חזותית בפלטפורמות המדיה. בעזרת עיצוב חזותי תוכלו לשנות כל אלמנט כמודל המסכים עם מודל התיבה CSS. מודל תיבת CSS מגדיר אלמנט בתבנית תיבה מלבנית סטנדרטית המגדירה את הגודל, המיקום והמאפיינים.
הערה: רק אלמנטים הניתנים לשינוי ניתנים לשינוי.
ממשיכים במאמר זה בנושא Transform In CSS
מהן תכונות הטרנספורמציה השונות?
בואו נסתכל על כל המאפיינים ההופכים:
1. סולם (): קנה המידה פירושו לשנות את גודל האלמנט בצורה אופקית או אנכית.
עבור קנה מידה אנכי:scaleX
לקבלת קנה מידה אופקי:בקנה מידה
עבור אלמנט, אתה יכול גם לשנות את גודל הגופן, הריפוד, הגובה או הרוחב. ערך ברירת המחדל הוא 1 שמשמעותו גם לספק 0.5 כשהערך מחצית אותו תוך מתן 2 מכפיל את קנה המידה.
2. הטיה (): מאפיין שיפוע מאפשר למשתמש להטות אלמנט ימינה או שמאלה מנקודת תיאום אחת. זה כמעט כמו להפוך מלבן למקבילית. אתה יכול להטות אלמנט לפי הקואורדינטות שלו.
דוגמא:
.element {transform: skewX (25deg)} .element {transform: skewY (25deg)כאשר אתה עושה זאת, האלמנט מוטה 25 מעלות אופקית ואנכית באמצעות skewX או skewY.
3. לסובב ( ) : ניתן לסובב אלמנט בכיוון השעון באמצעות מאפיין זה. אתה יכול לסובב אותו 180 מעלות או 360 מעלות כדי להחזיר אותו למקומו המקורי.
.element {transform: rotate (25deg)}כדי לספק גם סיבוב, אתה יכול להשתמש בכל אחד משלושת הממדים: rotateX, rotateY או rotateZ.
4. לתרגם ( ) : אתה יכול להזיז אלמנט כמו שצריך הפוך או לרוחב.
.element {transform: translate (20px, 10px)}תרגם יעביר אובייקט / אלמנט שצוין הפוך או לרוחב. הערך שצוין הראשון מזיז את האובייקט ימינה (שלילי יעביר אותו מצד שמאל) והערך השני יעביר אותו מטה (ציון ערך שלילי יעביר אותו כלפי מעלה).
אם זה עלול לבלבל אותך, החל את ציר ה- X כדי לשנות את מיקום האלמנט בצורה אופקית ואת צירי Y כדי לשנות את המיקום אנכית. ההיבט המדהים ביותר במאפיין טרנספורמציה הוא שהחלת טרנספורמציה רק תאפשר לאלמנט לנוע, תוך שמירה על כל אלמנט או טקסט אחר. המרחק נלקח בדרך כלל בפיקסלים או באחוזים.
לדוגמה:
.element {transform: translateX (value) transform: translateY (value)}5. פרספקטיבה (): ניתן לספק עומק בפרספקטיבה של אלמנט. זה מאפשר לתת טרנספורמציה תלת-ממדית לאלמנט על ידי הפיכתה לקובית בשינוי.
תרגם 3d (x, y, z)
תרגם Z (z)
תרגם 3d (x, y, z) translateZ (z)
הכנסת ציר z מעניקה לאלמנט הדמיה תלת ממדית. translateZ () מעביר את האלמנט לעבר הצופה ואילו ערך שלילי מרחיק אותו.
6. מטריצה () : שלב את כל התמרות לאחד.
לסובב (45 מעלות) לתרגם (24 פיקסלים, 25 פיקסלים)
החלת מטריצה () משלבת את כל מאפייני השינוי במערך אחד.
__בעצמו)
יישום מאפייני טרנספורמציה יכול לשפר מאוד את האלמנט שלך ולכן את הערעור באתר שלך. אל תנסה אותם!
זה מביא אותנו לסוף מאמר זה בנושא Transform In CSS.
אם אתה מעוניין ללמוד עוד על פיתוח אתרים, עיין ב מאת אדוריקה. הדרכת הסמכת פיתוח אתרים תעזור לך ללמוד כיצד ליצור אתרים מרשימים באמצעות HTML5, CSS3, Twitter Bootstrap 3, jQuery ו- Google APIs ולפרוס אותו לשירות אחסון פשוט של אמזון (S3).
אם אתה עדיין מעוניין אם יש לך שאלה כלשהי, תוכל לפרסם אותה בסעיף ההערות בבלוג 'מה זה CSS', ונחזור אליך בהקדם האפשרי.