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

Q: איך מסובבים אלמנט ב-CSS?

השתמשו ב-transform: rotate(45deg); או במאפיין הנפרד rotate: 45deg;. זוויות חיוביות מסובבות עם כיוון השעון וזוויות שליליות נגד כיוון השעון, סביב מרכז האלמנט, אלא אם משנים את transform-origin.

Q: מה ההבדל בין transform: rotate() למאפיין rotate?

הם מציירים את אותה תוצאה. המאפיין rotate בלתי תלוי ב-transform, כך שכלל hover יכול לשנות scale או translate בלי להסיר את הסיבוב, ולכל אחד יכול להיות transition משלו. יחד הם מתנהגים כמו transform: translate() rotate() scale(), בכל סדר שבו מצהירים עליהם.

Q: איך מסובבים תמונה ב-90 מעלות ב-CSS?

הוסיפו transform: rotate(90deg); (או rotate: 90deg;) ל-img. התמונה שומרת את המקום המקורי שלה בפריסה, כך שתמונה גבוהה שסובבה לרוחב עלולה לחפוף את השכנים שלה; תנו למיכל שלה מקום לגודל המסובב.

Q: איך גורמים לאלמנט להסתובב ב-CSS?

הגדירו @keyframes spin { to { rotate: 360deg; } } והחילו animation: spin 1s linear infinite;. השתמשו ב-linear כדי שהמהירות תישאר קבועה, והאטו או עצרו את הסיבוב תחת prefers-reduced-motion: reduce.

Q: איך מסובבים טקסט לאורך ב-CSS?

לתווית אנכית, writing-mode: vertical-rl עדיף בדרך כלל על rotate(90deg), כי הוא משנה גם את הפריסה: האלמנט תופס מקום אנכי במקום לחפוף. השתמשו ב-rotate להטיות דקורטיביות קטנות.

סיבוב אלמנט

שתי דרכים, אותה תוצאה: הפונקציה rotate() בתוך transform, או המאפיין rotate בפני עצמו. זוויות חיוביות מסובבות עם כיוון השעון:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotate</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 30px; }
    .box { width: 90px; height: 60px; display: grid; place-items: center; color: white; }
    .a { transform: rotate(45deg); background: #2563eb; }
    .b { rotate: 45deg; background: #16a34a; }
    .c { rotate: -15deg; background: #f59e0b; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box a">transform</div>
    <div class="box b">rotate: 45deg</div>
    <div class="box c">-15deg</div>
  </div>
</body>
</html>

הקופסה הכחולה והירוקה מסובבות בדיוק באותה צורה, 45 מעלות עם כיוון השעון סביב המרכז שלהן. לקופסה הענברית יש זווית שלילית, ולכן היא נוטה נגד כיוון השעון. סיבוב אף פעם לא מזיז את הפריסה: כל קופסה עדיין תופסת את המקום המקורי שלה של 90 על 60, ולכן אלמנטים מסובבים יכולים לחפוף את השכנים שלהם.

יחידות זווית

יחידה	סיבוב מלא	90 מעלות
`deg`	`360deg`	`90deg`
`turn`	`1turn`	`0.25turn`
`rad`	`6.2832rad`	`1.5708rad`
`grad`	`400grad`	`100grad`

deg היא הבחירה הרגילה; turn נקרא טוב לסיבובים (rotate: 1turn). זוויות מעל 360 מותרות ומשנות באנימציות: rotate(720deg) ב-keyframe מסתובב פעמיים. תמיד כתבו את היחידה: rotate(45) לא תקין ונזנח.

גררו את המחוון כדי לראות זווית בכל יחידה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angle slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .stage { display: grid; place-items: center; height: 160px; background: #f3f4f6; margin: 10px 0; }
    #arrow { width: 110px; height: 14px; background: #2563eb; border-radius: 7px; position: relative; }
    #arrow::after { content: ""; position: absolute; inset-inline-end: -10px; top: -8px; border: 15px solid transparent; border-inline-start: 18px solid #2563eb; border-inline-end: 0; }
  </style>
</head>
<body>
  <label>angle <input id="a" type="range" min="-360" max="360" value="30"></label>
  <div class="stage"><div id="arrow"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('a');
    const update = () => {
      const deg = Number(input.value);
      document.getElementById('arrow').style.rotate = deg + 'deg';
      document.getElementById('out').textContent =
        deg + 'deg = ' + (deg / 360).toFixed(3) + 'turn = ' + (deg * Math.PI / 180).toFixed(4) + 'rad';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

סיבוב סביב פינה: transform-origin

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    .face { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .hand {
      position: absolute;
      left: 76px;              /* 80px center minus half the 8px width */
      top: 20px;
      width: 8px;
      height: 60px;
      border-radius: 4px;
      background: #111827;
      transform-origin: bottom center; /* pivot at the center of the face */
      rotate: 120deg;
    }
    .pin { position: absolute; left: 74px; top: 74px; width: 12px; height: 12px; border-radius: 50%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="face"><div class="hand" id="hand"></div><div class="pin"></div></div>
</body>
</html>

הקצה התחתון של המחוג יושב על הפין הענברי במרכז השעון, ו-rotate: 120deg מסובב אותו לארבע. הסירו את השורה של transform-origin והמחוג מסתובב במקום זאת סביב האמצע שלו, מחוץ לפין.

סיבוב טקסט ותוויות אנכיות

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical text</title>
  <style>
    body { font-family: system-ui, sans-serif; padding-top: 24px; }
    .row { display: flex; gap: 12px; align-items: flex-start; }
    .label { background: #2563eb; color: white; padding: 6px 10px; }
    .rotated { rotate: -90deg; }
    .vertical { writing-mode: vertical-rl; rotate: 180deg; }
    .content { background: #e5e7eb; padding: 10px; }
    .badge { display: inline-block; rotate: -6deg; background: #f59e0b; padding: 4px 10px; margin: 16px 0 0 8px; }
  </style>
</head>
<body>
  <div class="row"><div class="label rotated" id="r">Section</div><div class="content">rotate: -90deg overlaps</div></div>
  <div class="row" style="margin-top: 20px;"><div class="label vertical" id="v">Section</div><div class="content">writing-mode takes vertical space</div></div>
  <span class="badge">New</span>
  <p id="out"></p>
  <script>
    const size = (id) => { const el = document.getElementById(id); return el.offsetWidth + ' x ' + el.offsetHeight; };
    document.getElementById('out').textContent = 'layout box: rotated ' + size('r') + ', writing-mode ' + size('v');
  </script>
</body>
</html>

התצוגה מראה את גודל הפריסה של כל תווית. התווית המסובבת עדיין תופסת את הקופסה המקורית שלה, הרחבה והנמוכה: היא משאירה רווח ריק לידה ובולטת מעל ומתחת לשורה שלה, לתוך מה שנמצא שם. זו עם writing-mode תופסת קופסה גבוהה וצרה. הוספת rotate: 180deg גורמת לה להיקרא מלמטה למעלה, שזה הכיוון הרגיל לתווית אנכית.

סיבוב אייקון בלחיצה או במעבר עכבר

סיבוב חץ ב-180 מעלות הוא הדרך הסטנדרטית להראות שמקטע פתוח. שלבו את rotate עם transition:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotating arrow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font: inherit; border: 1px solid #111827; background: white; border-radius: 6px; }
    .chevron { width: 10px; height: 10px; border-inline-end: 2px solid #111827; border-bottom: 2px solid #111827; rotate: 45deg; transition: rotate 0.25s ease-out; }
    .toggle[aria-expanded="true"] .chevron { rotate: 225deg; }
  </style>
</head>
<body>
  <button class="toggle" aria-expanded="false">Details <span class="chevron" aria-hidden="true"></span></button>
  <script>
    const btn = document.querySelector('.toggle');
    btn.addEventListener('click', () => btn.setAttribute('aria-expanded', btn.getAttribute('aria-expanded') !== 'true'));
  </script>
</body>
</html>

ה-chevron הוא ריבוע עם שני גבולות, מסובב ב-45 מעלות כך שהוא מצביע למטה. כשהכפתור מורחב הוא עובר ל-225 מעלות, מצביע למעלה, וה-transition מנפיש את חצי הסיבוב. המאפיין aria-expanded מניע את הסגנון, כך שהמצב הוויזואלי והמצב שקוראי מסך מכריזים עליו לעולם לא יסתרו זה את זה.

טוען מסתובב

סיבוב הוא רוטציה מ-0 עד 360 מעלות, שחוזרת עם תזמון linear כדי שהמהירות לא תשתנה אף פעם:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spinner</title>
  <style>
    @keyframes spin {
      to { rotate: 360deg; }
    }
    .spinner {
      width: 36px;
      height: 36px;
      border: 4px solid #e5e7eb;
      border-top-color: #2563eb;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .spinner { animation-duration: 3s; } /* slower, still shows activity */
    }
  </style>
</head>
<body>
  <div class="spinner" role="status" aria-label="Loading"></div>
</body>
</html>

עם keyframe של to בלבד, האנימציה מתחילה מהסיבוב של האלמנט עצמו (אין) ומסתיימת ב-360deg, ו-infinite חוזר עליה בלי קפיצה, כי 360deg נראה אותו דבר כמו 0. לאנשים שביקשו מהמערכת שלהם פחות תנועה, הטוען מסתובב פי שלושה לאט יותר. עוד על keyframes בדף על אנימציה.

סיבוב תלת-ממדי: rotateX, rotateY

rotateX() מטה אלמנט אחורה סביב הציר האופקי ו-rotateY() מסובב אותו סביב הציר האנכי, כמו דלת. בלי פרספקטיבה הם פשוט נראים מעוכים; perspective על ההורה מוסיף עומק:

.scene { perspective: 600px; }
.card  { transform: rotateY(35deg); }
.flip  { transform: rotateY(180deg); backface-visibility: hidden; } /* card flip */

כדי לשקף אלמנט במקום לסובב אותו, השתמשו ב-scale: -1 1 (היפוך אופקי). סיבוב של 180 מעלות הופך אותו על הראש, וזה לא אותו דבר.

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

סיבוב של <span> או <a> שנשארים במקום. אלמנטים inline רגילים מתעלמים מ-transforms. הוסיפו display: inline-block.
סיבוב שנעלם ב-hover. כלל hover עם transform: scale(1.1) מחליף את transform: rotate(...). השתמשו במאפיינים הנפרדים rotate ו-scale, או כתבו את שתי הפונקציות.
לצפות שהפריסה תפנה מקום. תמונה מסובבת שומרת את הקופסה הלא מסובבת שלה וחופפת את השכנים. תנו למיכל את הגודל המסובב, או השתמשו ב-writing-mode לטקסט.
טוענים עם ease. תזמון ברירת המחדל מאיץ ומאט בכל סיבוב. השתמשו ב-linear.
סיבוב סביב הנקודה הלא נכונה. הגדירו transform-origin לפני כוונון הזווית.

שאלות נפוצות

איך מסובבים אלמנט ב-CSS?

השתמשו ב-transform: rotate(45deg); או במאפיין הנפרד rotate: 45deg;. זוויות חיוביות מסובבות עם כיוון השעון וזוויות שליליות נגד כיוון השעון, סביב מרכז האלמנט, אלא אם משנים את transform-origin.

מה ההבדל בין transform: rotate() למאפיין rotate?

הם מציירים את אותה תוצאה. המאפיין rotate בלתי תלוי ב-transform, כך שכלל hover יכול לשנות scale או translate בלי להסיר את הסיבוב, ולכל אחד יכול להיות transition משלו. יחד הם מתנהגים כמו transform: translate() rotate() scale(), בכל סדר שבו מצהירים עליהם.

איך מסובבים תמונה ב-90 מעלות ב-CSS?

הוסיפו transform: rotate(90deg); (או rotate: 90deg;) ל-img. התמונה שומרת את המקום המקורי שלה בפריסה, כך שתמונה גבוהה שסובבה לרוחב עלולה לחפוף את השכנים שלה; תנו למיכל שלה מקום לגודל המסובב.

איך גורמים לאלמנט להסתובב ב-CSS?

הגדירו @keyframes spin { to { rotate: 360deg; } } והחילו animation: spin 1s linear infinite;. השתמשו ב-linear כדי שהמהירות תישאר קבועה, והאטו או עצרו את הסיבוב תחת prefers-reduced-motion: reduce.

איך מסובבים טקסט לאורך ב-CSS?

לתווית אנכית, writing-mode: vertical-rl עדיף בדרך כלל על rotate(90deg), כי הוא משנה גם את הפריסה: האלמנט תופס מקום אנכי במקום לחפוף. השתמשו ב-rotate להטיות דקורטיביות קטנות.

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