transform: rotate(15deg);מהו מחולל הטרנספורמים של CSS?
מחולל התמרת CSS הוא עורך חזותי עבור תכונת התמרת CSS.אתה מזיז מחוון עבור כל פונקציית התמרה - מתרגם, סובב, קנה מידה, הטיה, ופונקציות 3D rotateX, rotateY ופרספקטיבה - וצופה באפקט חל על אלמנט תצוגה מקדימה בזמן אמת, ואז מעתיק את ה-CSS המדויק שהוא מייצר הוא גם מאפשר לך להגדיר את מקור התמרת, נקודת העיגון כל סיבוב וקנה מידה מסתובבים סביב.
תכונת הטרנספורמציה ממקמת מחדש ומעצבת מחדש אלמנט מבלי להפריע לפריסה סביבו. אלמנט מתורגם, מסובב או מוקטן עדיין תופס את הקופסה המקורית שלו בזרימה, כך שאלמנטים שכנים לא זזים, וזה מה שהופך את הטרנספורמציה לכלי הנכון עבור אפקטי ריחוף, אנימציות כניסה וכל תנועה שלא אמורה להפעיל זרימה חוזרת. ניתן לרשום מספר פונקציות בהצהרה אחת, והן מיושמות מימין לשמאל במרחב הקואורדינטות של האלמנט, כך שהסדר באמת משנה את התוצאה: מתרגם ואז מסובב מזיז את האלמנט ואז מסובב אותו למקומו, בעוד שסובב ואז מתרגם מסובב את הצירים תחילה ושולח את האלמנט בזווית.
הכל קורה בדפדפן שלך התחל מתוך מוגדר מראש כמו לגדול, לסובב, להעיף או 3D כרטיס, לכוונן עדין כל פונקציה, ולהעתיק את ההצהרה הכלי כותב רק את הפונקציות ששינית בפועל, כך שאתה אף פעם לא לשלוח סולם מיותר (1) או לסובב (0deg) אין חשבון, אין העלאות, וזה ממשיך לעבוד במצב לא מקוון לאחר הדף נטען.
שני פרטים חוסכים זמן איתור באגים אמיתי ראשית, סיבובי 3D נראים תלת מימדיים רק כאשר קיימת פרספקטיבה - או פונקציית פרספקטיבה () תחילה באותה טרנספורמציה, כפי שהכלי הזה פולט אותה, או מאפיין פרספקטיבה על ההורה - אחרת rotateY פשוט מועך את האלמנט שטוח שנית, כל אלמנט עם טרנספורמציה מלבד אף אחד הופך לבלוק מכיל עבור צאצאיו הקבועים והממוקמים באופן מוחלט ויוצר הקשר הערמה חדש, בדיוק כמו תכונת המסנן מיקום: ילד קבוע בתוך הורה שעבר טרנספורמציה עוגן לאותו הורה ולא לנקודת התצוגה, וסדר אינדקס z שעבד לפני כן יכול להשתנות כאשר טרנספורמציה שוברת פריסה באופן שאין לו שום קשר לאיך שהיא נראית, שהתנהגות בלוק מכיל היא כמעט תמיד הסיבה.
כיצד להשתמש מחולל טרנספורמציה CSS?
בחר הגדרה מראש או התחל נקי
בחר הגדרה מראש כגון Grow, Rotate, Flip Horizontal, Skew או 3D Card עבור נקודת התחלה מיידית, או התחל מברירת המחדל שבה לא מופעלת טרנספורמציה.
התאם את מחווני הטרנספורמציה
גרור את מחווני הפרספקטיבה של תרגום, סיבוב, קנה מידה, הטיה ו-3D. התצוגה המקדימה מתעדכנת באופן מיידי כדי שתוכל לראות בדיוק כיצד האלמנט זז ומעצב מחדש.
הגדר את מקור הטרנספורמציה
בחר את נקודת המוצא - מרכז, פינה או קצה - שמסתובבת ומסתובבת מסביב. שינוי זה מהמרכז הוא מה שהופך סיבוב לנדנדה.
העתק את ה-CSS
העתק את הצהרת הטרנספורמציה שנוצרה, המפרטת רק את הפונקציות ששינית בסדר הנכון, והדבק אותה על כל רכיב בגיליון הסגנונות שלך.
תכונות מפתח
פונקציות 2D ו-3D
תרגם, סובב, קנה מידה והטיה עבור 2D, בתוספת rotateX, rotateY ופרספקטיבה עבור 3D - כל פונקציית טרנספורמציה נפוצה עם המחוון שלה
סדר פונקציות נכון
הכלי פולט פרספקטיבה תחילה ושומר על תרגום, סיבוב, קנה מידה והטיה בסדר הגיוני, כך שהטרנספורמציה המועתקת מתנהגת כפי שהתצוגה המקדימה נראית
בקרת מקור טרנספורמציה
הגדר את נקודת הציר לכל אחד מתשעת מיקומי מילות המפתח וראה כיצד היא משנה את הציר שסיבוב או קנה מידה מסתובבים
תפוקה מינימלית
רק הפונקציות שאתה משנה בפועל נכתבות, כך שלעולם לא תשלח ערך זהות כמו scale (1) או translateX (0px)
Frequently Asked Questions
Related Tools
CSS Animation Generator
Build CSS keyframe animations from presets like fade, slide, bounce and spin. Adjust duration, easing, delay, iteration and direction, preview live, then copy the keyframes and animation shorthand.
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CSS Grid Generator
Build CSS Grid layouts visually. Set columns, rows, track sizes, gaps and alignment with a live preview, then copy the generated grid CSS - all in your browser.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
Comments
0 comments
No comments yet. Be the first to share your thoughts!