מה זה transform?

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

מאפייני transform עיקריים

• rotate(angle) - סיבוב של האלמנט בזווית שניתנת בערכים כמו degrees (deg) או radians (rad). לדוגמה: rotate(45deg).
• scale(x, y) - התפשטות של האלמנט לפי ציר ה-X וציר ה-Y. ערכים גדולים מ-1 יגדילו את האלמנט וערכים קטנים מ-1 יקטינו אותו. לדוגמה: scale(1.5, 1.5).
• translate(x, y) - הזזה של האלמנט על גבי ציר ה-X וציר ה-Y. ערכים ניתנים באחוזים, פיקסלים או יחידות אחרות. לדוגמה: translate(50px, 50px).
• skew(x-angle, y-angle) - הטיית האלמנט בזוויות שונות בצירי ה-X וה-Y. לדוגמה: skew(30deg, 20deg).
• matrix(a, b, c, d, e, f) - מגדיר את כל השינויים בעזרת מטריצה. שימושי ליצירת אפקטים מורכבים. לדוגמה: matrix(1, 0, 0, 1, 50, 50).

מאפיינים נוספים

• transform-style - מגדיר איך תצוגת האלמנטים הפנימיים של האלמנט תתנהג בעת שינוי של transform. ערכים: flat, preserve-3d.
• transform-box - מגדיר את התיבה שדרכה האלמנט יתבצע. ערכים: border-box, fill-box, view-box, content-box.
• transform-origin - מגדיר את מקור השינוי של האלמנט (המרכז או כל מקום אחר). יש להשתמש ב-transform-origin-x, transform-origin-y, ו-transform-origin-z כדי לקבוע את האזורים הספציפיים.

שימוש במאפיין transform

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

דוגמה לשימוש ב-transform

להלן דוגמה לשימוש במאפיין transform:

שימושים מתקדמים

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

    
              <style>
                .transform-example {
                  width: 100px;
                  height: 100px;
                  background-color: lightblue;
                  transform: rotate(45deg) scale(1.5) translate(50px, 50px);
                  transform-style: preserve-3d;
                  transform-origin: center center;
                }
              </style>
              <div class="transform-example">
                דוגמה ל-transform
              </div>