وثائق CSS قابلة للتشغيل: التدوير rotate

Q: كيف أدوّر عنصرًا في CSS؟

استخدم transform: rotate(45deg); أو الخاصية المنفصلة rotate: 45deg;. الزوايا الموجبة تدور مع عقارب الساعة والسالبة عكسها، حول مركز العنصر ما لم تغيّر transform-origin.

Q: ما الفرق بين transform: rotate() والخاصية rotate؟

ترسمان النتيجة نفسها. الخاصية rotate مستقلة عن transform، فتستطيع قاعدة التمرير تغيير scale أو translate من دون إزالة التدوير، ولكل منها انتقالها الخاص. ومعًا تتصرف مثل 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) في إطار مفتاحي تدور مرتين. اكتب الوحدة دائمًا: 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 مع انتقال:

<!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>

الشارة مربع بحدين، مُدار 45 درجة كي يشير إلى الأسفل. حين يكون الزر موسّعًا يدور إلى 225 درجة، فيشير إلى الأعلى، ويحرّك الانتقال نصف الدورة. السمة 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>

مع إطار مفتاحي to وحده، تبدأ الحركة من تدوير العنصر نفسه (لا شيء) وتنتهي عند 360deg، وتكررها infinite من دون قفزة لأن 360deg تبدو مثل 0. وللأشخاص الذين طلبوا من أنظمتهم تقليل الحركة، يدور المؤشر أبطأ بثلاث مرات. المزيد عن الإطارات المفتاحية في صفحة animation.

التدوير ثلاثي الأبعاد: 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> يبقى في مكانه. العناصر السطرية العادية تتجاهل التحويلات. أضف display: inline-block.
تدوير يختفي عند التمرير. قاعدة تمرير فيها 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، فتستطيع قاعدة التمرير تغيير scale أو translate من دون إزالة التدوير، ولكل منها انتقالها الخاص. ومعًا تتصرف مثل 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 للميلان الزخرفي الصغير.

مفاهيم ذات صلة