הפעם הראשונה א rotateY הייתי בטוח שאטה כרטיס למסך פשוט מעך אותו שטוח במקום זאת, איבדתי את החלק הטוב יותר של אחר הצהריים לפני שהבנתי למה. לא הייתה פרספקטיבה. כתבתי את הסיבוב אבל לא את הפונקציה האחת שגורמת לסיבוב לקרוא כעומק, ו-CSS עשה בדיוק את מה שאמרתי לו ולא את מה שהתכוונתי. אחר הצהריים הזה הוא כל הסיבה שאני בונה עכשיו טרנספורמציות על ידי גרירת סליידרים וצפייה בקופסה מגיבה, במקום להקליד ערך, לשמור, לרענן ולפזול.
הcss transform נכס הוא אחד הדברים השימושיים ביותר בשפה ואחד הקלים ביותר לטעות בעדינות הוא זז, מסתובב, מאזניים ומטה אלמנט מבלי להפריע לשום דבר סביבו, וזו הסיבה שכל אפקט ריחוף, כל הרמת כרטיס, כל אנימציית כניסה נשענת עליו אבל הוא אורז הרבה התנהגות למחרוזת קצרה, סדר הפונקציות משנה את התוצאה, ולפונקציות ה-3D יש תלות שאינה נראית עד שפוגעים בה ערך שאתה יכול לראות שנבנה שווה הרבה יותר מערך שאתה צריך לדמיין.
ה מחולל טרנספורמציה של CSS נותן לך מחוון עבור כל פונקציה, לתרגם, לסובב, קנה מידה, הטיה ושלישיית 3D של rotateX, rotateY ופרספקטיבה, ומחיל כל שינוי על רכיב תצוגה מקדימה חי בזמן שאתה עושה את זה. זה גם מאפשר לך להגדיר את מקור הטרנספורמציה, נקודת העיגון שסיבובים וקנה מידה מסתובבים סביב ההצהרה המדויקת יושבת בתיבה מוכנה להעתקה למטה, המכילה רק את הפונקציות שנגעת בהן.
TL;DR: הcss
transformמאפיינים ממקמים מחדש ומעצבים מחדש אלמנט מבלי להשפיע על פריסת העמוד, וזה מה שהופך אותו לכלי הנכון לאפקטים של ריחוף ואנימציה פונקציות חלות מימין לשמאל, כך שהסדר חשוב; סיבובי 3D צריכים אperspective()להיראות תלת מימדי; וכל אלמנט שעבר טרנספורמציה הופך לבלוק מכיל עבור ילדיו הקבועים והמוחלטים. מחולל זה חושף כל פונקציה עם תצוגה מקדימה חיה, פולט רק את הפונקציות שאתה משנה, ומייצר CSS נקי שאתה יכול להדביק ישירות לגיליון סגנונות. הוא פועל כולו בדפדפן שלך ללא הרשמה.
איזו בעיה פותר מחולל טרנספורמציה של CSS?
ה transform המאפיין מופשט באותו אופן שבו CSS Grid הוא מופשט. אתה לא מזיז פיקסלים ישירות; אתה מתאר פעולה גיאומטרית ונותן לדפדפן לחשב את התוצאה. translateX(40px) rotate(15deg) scale(1.1) היא הוראה מדויקת, אבל אין דרך להרגיש את התוצאה של שרשור שלושת אלה מהטקסט בלבד אתה צריך לעבד את זה ורינדור זה בפרויקט משלך פירושו לולאת כתיבה-שמירה-רענון, שהיא איטית מספיק כדי שרוב האנשים יפסיקו להתנסות הרבה לפני שהם מצאו את הערך שהם רוצים.
גנרטור קורס את הלולאה הזו לכלום אתה גורר את המחוון לסובב והקופסה מסתובבת בזמן אמת אתה מעלה את הסולם והוא צומח מהמרכז שלו אתה מוסיף תרגום והוא מחליק תוך שמירה על התור שלו עשר דקות מזה והקשר בין המספרים והתנועה מפסיק להיות משהו שאתה מתרגם בראש שלך והופך למשהו שאתה מרגיש כשאתה מסיים, אין מה לתמלל, כי ה-CSS העובד נכתב עבורך כל הזמן.
יש יתרון שני שחשוב יותר ממה שהוא נראה בניית הטרנספורמציה על ידי מניפולציה פירושה שהכלי יכול לפלוט רק CSS תקף ומעוצב היטב. אתה לא יכול לייצר שבור transform ערך על ידי גרירת מחוון, כך הפלט הוא תמיד בטוח להדביק. That אמינות היא הסיבה שאני שומר מדף של בוני CSS חזותיים קרוב, אותה הסיבה שאני מושיט יד ל מחולל box-shadow במקום לספור קיזוז צל ביד.
מדוע סדר פונקציות הטרנספורמציה משנה?
זהו הפרט היחיד שהכי מסע אנשים, וכדאי להבין אותו במקום לעבוד סביבו. כשאתה מפרט כמה פונקציות באחת transform, הדפדפן מחיל אותם מימין לשמאל, כל אחד פועל במרחב הקואורדינטות שהשאיר הקודם. זה אומר שהסדר באמת משתנה במקום שבו האלמנט מסתיים.
לקחת translateX(100px) rotate(45deg) לעומת rotate(45deg) translateX(100px). בראשון, האלמנט מתורגם מאה פיקסלים ולאחר מכן מסובב במקומו, כך שהוא יושב מאה פיקסלים ימינה ומסובב ארבעים וחמש מעלות. בשני, הסיבוב מתרחש ראשון, מה שהופך את האלמנט's קואורדינטות צירים, ולאחר מכן התרגום מזיז אותו מאה פיקסלים לאורך הסתובב ציר X, שולח אותו באלכסון למטה וימינה אותן שתי פונקציות, אותם שני ערכים, מיקומים שונים לחלוטין.
המחולל פולט את הפונקציות שלו בסדר מכוון, פרספקטיבה תחילה, לאחר מכן לתרגם, ואז לסובב, ואז קנה מידה, ואז להטות, שזו ברירת מחדל הגיונית ששומרת על המקרים הנפוצים להתנהג באופן אינטואיטיבי. אבל ברגע שאתה מבין שהסדר הוא משמעותי, אתה גם מבין מדוע העתקת טרנספורמציה ממקום אחד למשנהו מייצרת לפעמים תוצאה שלא ציפית לה: הזזת את המחרוזת אבל לא את המודל המנטלי שמאחוריה. לבנות את זה בעצמך, ולראות כל פונקציה 's תרומה, היא הדרך שבה המודל הזה נבנה.
איך אני עושה טרנספורמציה 3D נראה 3D?
הנה המלכודת שעלתה לי באותו אחר הצהריים הפונקציות rotateX ו rotateY סובב אלמנט סביב הצירים האופקיים והאנכיים, שאמור להטות אותו לעברך או הרחק ממך כמו סיבוב עמוד. אבל כברירת מחדל אין עומק בסצנה, כך שהסיבוב מוקרן ישר על המישור השטוח של המסך והאלמנט פשוט נראה נדחס. א rotateY(60deg) ללא פרספקטיבה נראה שהאלמנט הצטמצם, לא כאילו הוא הסתובב.
המרכיב החסר הוא perspective, ויש שתי דרכים לספק אותו אתה יכול לשים א perspective נכס על אלמנט האב, אשר קובע נקודת היעלמות משותפת לכל ילדיו 3D, או שאתה יכול להוסיף א perspective() פונקציה ממש בתחילת האלמנט ' משלו transform, מה שנותן לאלמנט אחד עומק משלו. מחולל זה משתמש בגישה השנייה: הגדר את מחוון הפרספקטיבה והוא פולט perspective() ראשון בשרשרת, בדיוק איפה שהוא צריך להיות ערכים קטנים יותר, איפשהו בין שלוש מאות לשש מאות פיקסלים, ממקמים את נקודת ההיעלמות קרוב לאלמנט והופכים את העומק לדרמטי; ערכים גדולים יותר משטחים את האפקט לקראת הטיה עדינה.
הקלף 3D שנקבע מראש בכלי הוא הדרך המהירה ביותר לראות זאת הוא קובע פרספקטיבה של שש מאות פיקסלים וא rotateY של עשרים וחמש מעלות, ותיבת התצוגה המקדימה טיפים בצורה משכנעת לתוך המסך סובב את מחוון הפרספקטיבה בחזרה לאפס וצפה באותו סיבוב מתמוטט לתוך סקווש שטוח זה לפני ואחרי זה כל השיעור בשני גררים.
מה עושה transform-origin?
כל סיבוב וכל קנה מידה זקוקים לנקודה קבועה להסתובב סביבה, והנקודה הזו היא מקור הטרנספורמציה. כברירת מחדל הוא יושב במרכז המת של האלמנט, וזו הסיבה שהוא לא שונה rotate מסובב קופסה סביב האמצע שלה וללא שינוי scale מצמיח אותו כלפי חוץ לכל כיוון בבת אחת הזז את המקור ושתי ההתנהגויות משתנות.
הגדר את המקור ל top left וסיבוב הופך לנדנדה, האלמנט מסתובב מהפינה השמאלית העליונה שלו כמו שלט צירים. הגדר אותו ל bottom וא scaleY מגדיל את האלמנט כלפי מעלה מהבסיס שלו במקום להרחיב אותו באופן סימטרי, וזה בדיוק מה שאתה רוצה עבור סרגל שאמור לעלות מציר התרשים. המחולל מציע את כל תשעת מיקומי מילות המפתח, המרכז, ארבעת הקצוות וארבע הפינות, ומעדכן את התצוגה המקדימה ברגע שאתה בוחר אחת, כך שההבדל בין סיבוב לתנופה הוא במרחק לחיצה אחת.
זהו אחד מאותם מאפיינים שכמעט בלתי נראים עד שאתה צריך את זה, ואז זה הדבר היחיד שמייצר את האפקט שאתה מחפש תפריט שאמור להיפתח מהקצה העליון שלו, הסבר כלים שאמור להגדיל את הגודל מתוך האלמנט אליו הוא שייך, כרטיס שאמור להסתובב מעבר לפינה ולא באמצע שלו, כולם הם מקור טרנספורמציה, ואף אחד מהם אינו ברור מה- transform ערך לבד.
מדוע טרנספורמציה לא דוחפת אלמנטים אחרים מסביב?
אחד המאפיינים השימושיים ביותר של transform הוא גם זה שאנשים מוצאים מפתיע ביותר בפעם הראשונה שהוא נושך אותם אלמנט שעבר טרנספורמציה לא משפיע על הפריסה סביבו. כאשר אתה מתרגם תיבה ארבעים פיקסלים ימינה, הוא מציג ארבעים פיקסלים ימינה, אך הוא עדיין שומר את החלל המקורי שלו בזרימת המסמכים, כך ששום דבר אחר לא זז כדי למלא את הפער ושום דבר לא נדחק הצידה טרנספורמציה היא אפקט צבע-זמן, המיושם לאחר הפריסה כבר חושבה.
זוהי תכונה, לא באג, וזה בדיוק מה שהופך להפוך את הכלי הנכון עבור אנימציה. כי הזזת אלמנט עם transform אינו מפעיל זרימה חוזרת, הדפדפן יכול להרכיב את השינוי ב-GPU ולשמור על האנימציה בשישים פריימים בשנייה. הזזת אותו אלמנט עם top או left או margin מאלץ את הדפדפן לחשב מחדש פריסה על כל פריים בודד, שהיא הסיבה השכיחה ביותר לאנימציה שמגמגמת ומפילה פריימים. אם אתה רוצה תנועה חלקה, אתה עושה אנימציה transform ו opacity, ואתה משאיר את מאפייני הפריסה לבד. כאשר אתה צריך את התוכן שמסביב כדי לזרום מחדש, זה סימן שאתה רוצה שינוי פריסה ולא טרנספורמציה, וכלי כמו מחולל flexbox או ה מחולל רשת CSS הוא המקום הנכון להתחיל בו.
מדוע ילד קבוע נשבר בתוך האלמנט שעבר שינוי שלי?
זה הגוצ'ה שנראה כמו באג במשהו לא קשור, וכדאי לדעת לפני שזה עולה לכם שעה המפרט אומר שכל אלמנט עם א transform ערך אחר מאשר none הופך לבלוק מכיל עבור צאצאיו הממוקמים fixed או absolute, וזה גם יוצר הקשר ערימה חדש. לשני אלה יש השלכות שצצות רחוק מהטרנספורמציה עצמה.
שינוי הבלוק המכיל הוא זה שמפתיע אנשים. א position: fixed אלמנט אמור לעגן אל נקודת המבט, להישאר במקום כשהדף גולל. אבל אם לאב קדמון כלשהו של אותו אלמנט קבוע יש טרנספורמציה, האלמנט הקבוע עוגן אליו האב הקדמון ההוא במקום זאת, ופתאום שלך "fixed" header גולל משם עם התוכן או המודאל שלך לכוד בתוך כרטיס שום דבר על הטרנספורמציה's המראה מרמז על זה; האלמנט נראה בסדר, ומשהו שלוש רמות למטה ממקם את עצמו בצורה שגויה כאשר אלמנט קבוע או מוחלט מתנהג כאילו הוא לכוד, הדבר הראשון שיש לבדוק הוא האם אב קדמון נושא טרנספורמציה השינוי בהקשר הערימה גורם למעמד מקביל של בלבול, כאשר א z-index זה עבד פתאום לא, כי האלמנט שעבר טרנספורמציה אטם את ילדיו לשכבת הערמה משלהם. אותה התנהגות בדיוק חלה על filter רכוש, וזו הסיבה שה מחולל מסנן CSS נושא את אותה אזהרה.
אילו פונקציות מכסה הגנרטור, ומתי מגיעים לכל אחת?
הכלי חושף את הסט המלא של פונקציות הטרנספורמציה הנפוצות, והוא עוזר לדעת למה כל אחת מיועדת במקום לגרור אותן באקראי הנה המפה.
| פונקציה | מה שזה עושה | שימוש אופייני |
|---|---|---|
translateX / translateY |
מזיז את האלמנט לאורך ציר | כניסות להחליק פנימה, דחיפות לרחף, מיקום היסט |
rotate |
מסובב את האלמנט סביב המרכז שלו (2D) | תגים מוטים, מעמיסים מסתובבים, זוויות ריחוף שובבות |
scale (X ו-Y) |
גדל או מכווץ את האלמנט | זום ריחוף, אפקטי פופ, משוב לחיצה למטה |
skewX / skewY |
מטה את האלמנט לאורך ציר | באנרים דינמיים, צורות בסגנון נטוי, סימני תנועה |
rotateX / rotateY |
הופך את האלמנט במרחב 3D | היפוך כרטיס, לוחות הטיה, אפקטי זרימת כיסוי |
perspective |
מוסיף עומק כך סיבובי 3D לקרוא נכון | תמיד מזווג עם rotateX או rotateY |
השניים שצריכים שותף הם סיבובי ה-3D, שלא עושים שום דבר משכנע בלי פרספקטיבה, וסולם שלילי, שכדאי לקרוא לו כי הוא לא מובן מאליו. Setting scaleX לערך שלילי הופך את האלמנט אופקית, כמו מראה, וכך פועלת ההגדרה המוקדמת של Flip Horizontal. זהו טריק שימושי באמת, המשקף סמל במקום לייצא נכס שני, והוא נופל ישר מבקרת קנה המידה ברגע שאתה יודע שערכים שליליים מותרים.
איך הגנרטור שומר על התצוגה המקדימה כנה?
מצב הכשל של כל בונה חזותי הוא סחיפה בין מה שהתצוגה המקדימה מראה לבין מה שהקוד המיוצא מייצר כלי שמעבד את התצוגה המקדימה שלו בצורה אחת וכותב את ה-CSS שלו בצורה אחרת גרוע יותר מאשר שום כלי בכלל, כי הוא מלמד אותך ערך שלא ישחזר מחולל זה נמנע מכך על ידי בניית התצוגה המקדימה ' סגנון מוטבע של s וההצהרה המועתקת מאותה פונקציה, אז מה שאתה רואה זה ממש מה שאתה מדביק אין נתיב קוד שני שיכול לא להסכים.
לכן גם הפלט מכיל רק את הפונקציות ששיניתם. Leaving scale בזהותו של אחד, או rotate באפס, פירושו שהפונקציות הללו פשוט נעדרות מהמחרוזת במקום כתובות כמיותרות scale(1) רַעַשׁ. טרנספורמציה נקייה היא כזו שאתה יכול לקרוא במבט חטוף ולסמוך עליה, ולפלוט רק פונקציות משמעותיות היא אותה דיסציפלינה שאני מסתמך עליה בכל כלי ה-CSS החזותיים, מה מחולל גרדיאנט לבונה צל-הקופסה אם אתה מרכיב ערכה רחבה יותר, ה ערכת כלים למפתחי אינטרנט אוסף את אלה שאני פותח לרוב, וההרגלים מאחורי השימוש בהם היטב נמצאים ב כלי פרודוקטיביות למפתחים מדריך.
אילו דפדפנים תומכים בהמרות CSS?
טרנספורמציות CSS נתמכות בכל דפדפן נוכחי והיו כבר הרבה יותר מעשור פונקציות ה-2D, לתרגם, לסובב, לשנות קנה מידה ולהטות, הן אוניברסליות ולא מקודמות, ופונקציות ה-3D יחד עם perspective נתמכים באותה מידה ב-Chrome, Firefox, Safari ו-Edge. הישן -webkit- ו -moz- קידומות שהיו נחוצות פעם הן משקל מת בגיליון סגנונות היום, ואת הפלט של מחולל זה הוא סטנדרטי, לא קידומת CSS אתה יכול לשלוח כפי שנכתב עבור הכללים הסמכותיים, CSS Transforms מודול רמה 1 ורמה 2 מפרטים מ W3C הם המקורות העיקריים, והם שווים לקרוא פעם המחולל נתן לך את האינטואיציה לעקוב אחריהם.
אם אתה בונה ערכת כלים ויזואלית רחבה יותר לצד זה, ה מחולל border-radius ובונה המעבר הם מלווים טבעיים, שכן טרנספורמציה על ריחוף כמעט תמיד רוצה מעבר כדי להחליק אותו. הכל כאן פועל בצד הלקוח, וה-CSS שאתה מעתיק הוא שלך לשימוש ללא זמן ריצה, ללא שלב בנייה וללא תלות.
שאלות נפוצות
מהו מחולל טרנספורמציה של CSS?
מחולל טרנספורמציה CSS הוא כלי חזותי שבונה ערך טרנספורמציה CSS מהגדרות שתבחר אתה מתאים תרגום, סיבוב, קנה מידה, הטיה ופרספקטיבה 3D עם מחוונים, והוא מוציא את הצהרת טרנספורמציה יחד עם תצוגה מקדימה חיה של התוצאה.
האם סדר פונקציות הטרנספורמציה משנה?
כן. פונקציות מוחלות מימין לשמאל במערכת קואורדינטות האלמנטים, אז לתרגם ואז לסובב זה לא אותו דבר כמו לסובב ואז לתרגם. תרגום תחילה מזיז את האלמנט ואז מסובב אותו למקומו; סיבוב ראשון מסובב את הצירים, כך שתרגום מאוחר יותר שולח אותו בזווית.
איך אני גורם להתמרת CSS להיראות 3D?
סיבוב 3D צריך פרספקטיבה כדי לקרוא כעומק הוסף פונקציית פרספקטיבה () בתחילת הטרנספורמציה, אשר מחולל זה פולט כאשר אתה מגדיר את המחוון פרספקטיבה, או לשים מאפיין פרספקטיבה על אלמנט האב ערכים סביב 300 עד 600 פיקסלים להפוך את העומק דרמטי ביותר.
מה עושה transform-origin?
מקור טרנספורמציה קובע את הנקודה שהטרנספורמציה מסתובבת ומתאזנת סביבה. ברירת המחדל היא מרכז האלמנט. הזז אותו לפינה וסיבוב הופך לתנופה מאותה פינה; הזז אותו לקצה וקנה המידה גדל מהקצה הזה ולא החוצה לכל כיוון.
מדוע טרנספורמציה לא מזיזה אלמנטים אחרים בדף?
טרנספורמציה היא אפקט צבע-זמן האלמנט מעבד במיקום החדש שלו אבל עדיין שומר את הקופסה המקורית שלו בפריסה, אז שום דבר סביבו לא משתנה. זה מה שהופך את הטרנספורמציה לאידיאלית עבור אנימציה, ומדוע אתה משתמש במרווח, מיקום או מאפיין פריסה כאשר אתה צריך תוכן כדי לזרום מחדש.
מדוע ילד קבוע או מוחלט נשבר בתוך אלמנט שעבר טרנספורמציה?
כל אלמנט עם טרנספורמציה מלבד אף אחד הופך לבלוק מכיל עבור צאצאיו הקבועים והממוקמים באופן מוחלט ויוצר הקשר ערימה חדש. מיקום: ילד קבוע ואז עוגן להורה שעבר טרנספורמציה במקום לנקודת התצוגה, וסדר אינדקס z יכול להשתנות. הזז את הילד אל מחוץ לאלמנט שעבר טרנספורמציה אם הוא חייב להישאר מקובע למסך.
האם עלי להנפיש טרנספורמציה במקום למעלה, שמאלה, רוחב או גובה?
כן, לתנועה חלקה. transform ואטימות מורכבים על GPU ולא להפעיל פריסה, אז הם הנפשה ב 60fps. הנפשת למעלה, שמאל, רוחב או גובה מאלץ את הדפדפן לחשב מחדש פריסה על כל מסגרת, אשר הוא הגורם הרגיל של אנימציה janky.
האם הטרנספורמציה שנוצרה CSS חופשית ובטוחה לשימוש?
כן הכלי חינמי לחלוטין ללא מגבלות הרשמה או שימוש, והוא פולט CSS סטנדרטי ללא קידומת הנתמך בכל דפדפן מודרני כל העיבוד מתרחש בדפדפן שלך, כך ששום דבר לא מועלה והכלי עובד במצב לא מקוון לאחר הטעינה.
