תיעוד CSS עם דוגמאות להרצה: Transform

Q: מה transform עושה ב-CSS?

הוא משנה את האופן שבו אלמנט מצויר: מוזז (translate), משנה גודל (scale), מסובב (rotate) או מוטה (skew). האלמנט שומר על המקום המקורי שלו בפריסה, כך שהאלמנטים שסביבו לא זזים.

Q: איך מחילים כמה transforms ב-CSS?

כתבו אותם בערך transform אחד, מופרדים ברווחים: transform: translateX(50px) rotate(20deg) scale(1.2);. כתיבת הצהרת transform שנייה מחליפה את הראשונה במקום להוסיף עליה.

Q: למה transform לא עובד על ה-span שלי?

transforms לא חלים על אלמנטים inline רגילים כמו או פשוטים. תנו לאלמנט display: inline-block או block וה-transform יעבוד.

מה transform עושה

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 30px 20px; }
    .slot { outline: 2px dashed #9ca3af; width: 90px; height: 60px; }
    .box { width: 90px; height: 60px; background: #2563eb; color: white; display: grid; place-items: center; }
    .t1 { transform: translate(20px, 10px); }
    .t2 { transform: scale(1.3); background: #16a34a; }
    .t3 { transform: rotate(20deg); background: #f59e0b; color: #111827; }
    .t4 { transform: skewX(-20deg); background: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="slot"><div class="box t1">translate</div></div>
    <div class="slot"><div class="box t2">scale</div></div>
    <div class="slot"><div class="box t3">rotate</div></div>
    <div class="slot"><div class="box t4">skewX</div></div>
  </div>
</body>
</html>

translate(20px, 10px) מזיז את הקופסה הכחולה 20px לאורך השורה ו-10px למטה. scale(1.3) מגדיל את הירוקה ב-30% סביב המרכז שלה. rotate(20deg) מסובב את הענברית עם כיוון השעון, ו-skewX(-20deg) מטה את הכהה. בכל המקרים, המקום המקווקו, שהוא המקום שהאלמנט תופס בפריסה, נשאר בדיוק איפה שהיה.

פונקציות transform

פונקציה	עושה	דוגמה
`translate(x, y)`	מזיזה	`translate(20px, -10px)`, `translate(-50%, -50%)`
`translateX(x)` / `translateY(y)`	מזיזה על ציר אחד	`translateY(-4px)`
`scale(s)` / `scale(x, y)`	משנה גודל (1 = מקורי, 0.5 = חצי, שלילי משקף)	`scale(1.1)`, `scale(-1, 1)`
`scaleX(s)` / `scaleY(s)`	משנה גודל על ציר אחד	`scaleX(0.5)`
`rotate(angle)`	מסובבת עם כיוון השעון (שלילי = נגד כיוון השעון)	`rotate(45deg)`, `rotate(0.25turn)`
`skew(x, y)` / `skewX(a)` / `skewY(a)`	מטה	`skewX(-15deg)`
`matrix(a, b, c, d, e, f)`	כל מה שלמעלה במטריצה אחת, בעיקר מה שהדפדפן מחזיר
`none`	בלי transform

אחוזים ב-translate() הם ביחס לגודל של האלמנט עצמו, לא של ההורה שלו. לסיבוב יש דף משלו עם מעלות, סיבובים מלאים וסחרור: CSS rotate.

מגרש משחקים ל-transform

הזיזו את המחוונים. השורה הראשונה היא ערך ה-transform שבניתם; השנייה היא המטריצה שהדפדפן חישב ממנו, וזה מה ש-getComputedStyle מחזיר לכל transform:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 16px; }
    .stage { height: 170px; display: grid; place-items: center; background: #f3f4f6; margin: 10px 0; overflow: hidden; }
    #box { width: 80px; height: 80px; background: #2563eb; color: white; display: grid; place-items: center; border-radius: 6px; }
    code { display: block; }
  </style>
</head>
<body>
  <div class="controls">
    <label>translateX <input type="range" data-f="translateX" data-u="px" min="-120" max="120" value="0"></label>
    <label>scale <input type="range" data-f="scale" data-u="" min="0.5" max="1.8" step="0.1" value="1"></label>
    <label>rotate <input type="range" data-f="rotate" data-u="deg" min="-180" max="180" value="0"></label>
    <label>skewX <input type="range" data-f="skewX" data-u="deg" min="-40" max="40" value="0"></label>
  </div>
  <div class="stage"><div id="box">Box</div></div>
  <code id="value"></code>
  <code id="matrix"></code>
  <script>
    const box = document.getElementById('box');
    const inputs = document.querySelectorAll('input');
    const update = () => {
      const t = [...inputs].map((i) => i.dataset.f + '(' + i.value + i.dataset.u + ')').join(' ');
      box.style.transform = t;
      document.getElementById('value').textContent = 'transform: ' + t + ';';
      document.getElementById('matrix').textContent = 'computed: ' + getComputedStyle(box).transform;
    };
    inputs.forEach((i) => i.addEventListener('input', update));
    update();
  </script>
</body>
</html>

transforms לא מזיזים את הפריסה

אלמנט עם transform מצויר במקום אחר, אבל הדף נפרס כאילו אין לו transform. השכנים שלו שומרים על המיקום שלהם. זה מה שהופך transforms לטובים לאפקטי hover ולאנימציה: שום דבר סביבם לא מחושב מחדש.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No reflow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 10px; padding: 24px 10px; }
    .row div { width: 80px; height: 50px; background: #e5e7eb; display: grid; place-items: center; }
    .row .grow-t { transform: scale(1.5); background: #16a34a; color: white; }
    .row .grow-w { width: 120px; height: 75px; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="row" id="a"><div>A</div><div class="grow-t">scale(1.5)</div><div id="c1">C</div></div>
  <div class="row" id="b"><div>A</div><div class="grow-w">width 120px</div><div id="c2">C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'C starts at x = ' + document.getElementById('c1').offsetLeft + 'px next to the scaled box, and at x = ' +
      document.getElementById('c2').offsetLeft + 'px next to the resized one.';
  </script>
</body>
</html>

שתי הקופסאות האמצעיות נראות גדולות פי 1.5. זו עם scale חופפת את השכנים שלה ו-C נשארת במקום; זו שהוגדלה עם width ו-height דוחפת את C עוד 40px הלאה.

כמה transforms והסדר שלהם

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform order</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .stage { position: relative; height: 170px; background: #f3f4f6; }
    .box { position: absolute; top: 20px; left: 20px; width: 60px; height: 40px; opacity: 0.85; }
    .a { transform: translateX(120px) rotate(45deg); background: #2563eb; }
    .b { transform: rotate(45deg) translateX(120px); background: #16a34a; }
  </style>
</head>
<body>
  <div class="stage"><div class="box a"></div><div class="box b"></div></div>
  <p id="out"></p>
  <script>
    const center = (el) => { const r = el.getBoundingClientRect(); return Math.round(r.left + r.width / 2) + ', ' + Math.round(r.top + r.height / 2); };
    document.getElementById('out').textContent =
      'blue (translate then rotate) center: ' + center(document.querySelector('.a')) +
      '  |  green (rotate then translate) center: ' + center(document.querySelector('.b'));
  </script>
</body>
</html>

הקופסה הכחולה זזה 120px ישר לאורך השורה ואז הסתובבה במקום. הקופסה הירוקה הסתובבה קודם, ולכן "ציר ה-x" שלה מצביע באלכסון, ו-translateX(120px) מזיז אותה במורד האלכסון. אותן פונקציות, מקום אחר.

המלכודת השנייה: הצהרת transform שנייה מחליפה את הראשונה. אם לכרטיס יש transform: rotate(-2deg) וכלל ה-hover שלו אומר transform: scale(1.05), הסיבוב נעלם ב-hover. חזרו על שניהם (rotate(-2deg) scale(1.05)), או השתמשו במאפיינים הנפרדים שלמטה.

transform-origin

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 20px 30px 40px; }
    .slot { outline: 2px dashed #9ca3af; width: 80px; height: 50px; }
    .box { width: 80px; height: 50px; background: #2563eb; transform: rotate(25deg); }
    .tl { transform-origin: top left; }
    .br { transform-origin: bottom right; }
  </style>
</head>
<body>
  <div class="row">
    <div><code>center</code><div class="slot"><div class="box"></div></div></div>
    <div><code>top left</code><div class="slot"><div class="box tl"></div></div></div>
    <div><code>bottom right</code><div class="slot"><div class="box br"></div></div></div>
  </div>
</body>
</html>

שלוש הקופסאות מסתובבות ב-25 מעלות. הראשונה מסתובבת סביב האמצע שלה, השנייה שומרת את הפינה השמאלית העליונה שלה צמודה לפינת המקום, והשלישית את הפינה הימנית התחתונה. תפריט נפתח שגדל מתוך הכפתור שלו משתמש ב-transform-origin: top עם scale().

המאפיינים translate, scale ו-rotate

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

.card {
  rotate: -2deg;
  transition: scale 0.2s ease-out;
}
.card:hover {
  scale: 1.05;   /* the rotation stays, because it is a different property */
}

הם תמיד משתלבים כאילו נכתבו transform: translate(...) rotate(...) scale(...) לפני כל ערך transform, בכל סדר שבו מצהירים עליהם. שימו לב לתחביר: translate: 10px 20px ו-scale: 1.2 מקבלים ערכים בלי הסוגריים של הפונקציה.

מרכוז עם translate(-50%, -50%)

מכיוון שהאחוזים ב-translate() מתייחסים לגודל של האלמנט עצמו, top: 50%; left: 50%; transform: translate(-50%, -50%) ממרכז אלמנט עם מיקום absolute בכל גודל בתוך ההורה שלו. הדף על מרכוז div משווה את זה ל-flexbox ול-grid.

טעויות נפוצות

שתי הצהרות transform. המאוחרת מנצחת לגמרי. שלבו את הפונקציות, או השתמשו במאפיינים rotate, scale ו-translate.
transform על אלמנט inline. <span> או <a> פשוטים מתעלמים מ-transform. הפכו אותם ל-inline-block.
לצפות שהשכנים יזוזו. transforms אף פעם לא משנים את הפריסה. כדי לפנות מקום, שנו width, margin או gap.
סדר פונקציות שגוי. rotate() לפני translate() מזיז לאורך הציר המסובב.
הפתעות עם ילדים עם position: fixed. אלמנט עם transform הופך לבלוק המכיל של צאצאים עם מיקום fixed, כך שכותרת fixed בתוכו נגללת יחד איתו. הוא גם יוצר stacking context חדש עבור z-index.

שאלות נפוצות

מה transform עושה ב-CSS?

הוא משנה את האופן שבו אלמנט מצויר: מוזז (translate), משנה גודל (scale), מסובב (rotate) או מוטה (skew). האלמנט שומר על המקום המקורי שלו בפריסה, כך שהאלמנטים שסביבו לא זזים.

איך מחילים כמה transforms ב-CSS?

כתבו אותם בערך transform אחד, מופרדים ברווחים: transform: translateX(50px) rotate(20deg) scale(1.2);. כתיבת הצהרת transform שנייה מחליפה את הראשונה במקום להוסיף עליה.

האם הסדר של פונקציות transform חשוב?

כן. בקריאה משמאל לימין, כל פונקציה פועלת בצירים שהפונקציות הקודמות השאירו, ולכן rotate(45deg) translateX(100px) מזיז את האלמנט לאורך ציר מסובב, בעוד ש-translateX(100px) rotate(45deg) מזיז אותו ישר ואז מסובב אותו.

מה זה transform-origin?

הנקודה הקבועה שסביבה קורים שינוי הגודל, הסיבוב וההטיה. ברירת המחדל היא המרכז (50% 50%). transform-origin: top left גורם לאלמנט לגדול מהפינה השמאלית העליונה שלו, או להסתובב סביבה.

למה transform לא עובד על ה-span שלי?

transforms לא חלים על אלמנטים inline רגילים כמו <span> או <a> פשוטים. תנו לאלמנט display: inline-block או block וה-transform יעבוד.

מושגים קשורים