وثائق CSS قابلة للتشغيل: transform في CSS

Q: ماذا تفعل transform في CSS؟

تغيّر طريقة رسم العنصر: تحريكه (translate)، أو تغيير حجمه (scale)، أو تدويره (rotate)، أو إمالته (skew). يحتفظ العنصر بمكانه الأصلي في التخطيط، فلا تتحرك العناصر المحيطة به.

Q: كيف أطبّق أكثر من تحويل في CSS؟

اذكرها في قيمة transform واحدة تفصل بينها مسافات: transform: translateX(50px) rotate(20deg) scale(1.2);. كتابة تصريح transform ثانٍ تستبدل الأول بدل أن تضيف إليه.

Q: لماذا لا تعمل transform على عنصر span عندي؟

لا تنطبق التحويلات على العناصر السطرية غير المستبدلة مثل أو العاديين. أعطِ العنصر display: inline-block أو block فتعمل التحويلات.

ماذا تفعل 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) الداكن. في كل الحالات تبقى الخانة المتقطعة، أي المساحة التي يشغلها العنصر في التخطيط، في مكانها تمامًا.

دوال التحويل

الدالة	ماذا تفعل	مثال
`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`	لا تحويل

النسب المئوية في translate() نسبية إلى حجم العنصر نفسه، لا إلى حجم أبيه. وللتدوير صفحته الخاصة بالدرجات واللفات والدوران المستمر: rotate في CSS.

ساحة تجربة transform

حرّك المنزلقات. السطر الأول هو قيمة transform التي بنيتها؛ والثاني هو المصفوفة التي حسبها المتصفح منها، وهي ما تعيده getComputedStyle لأي تحويل:

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

التحويلات لا تحرّك التخطيط

العنصر المحوَّل يُرسم في مكان آخر، لكن الصفحة تُرتَّب كأنه غير محوَّل. يحتفظ جيرانه بمواضعهم. وهذا ما يجعل التحويلات مناسبة لتأثيرات التمرير والحركة: لا يُعاد ترتيب شيء حولها.

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

يبدو الصندوقان الأوسطان أكبر بمرة ونصف. المكبَّر بالتحويل يتداخل مع جيرانه ويبقى C مكانه؛ أما المكبَّر بـ width وheight فيدفع C مسافة 40px إضافية.

عدة تحويلات وترتيبها

ضع عدة دوال في 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) وقاعدة التمرير تقول transform: scale(1.05)، يختفي التدوير عند التمرير. كرر الاثنين (rotate(-2deg) scale(1.05))، أو استخدم الخصائص المنفصلة أدناه.

transform-origin

يحدث تغيير الحجم والتدوير والإمالة حول نقطة ثابتة، هي أصل التحويل، وهي المركز افتراضيًا. غيّرها بكلمات مفتاحية أو أطوال أو نسب مئوية:

<!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%) عنصرًا بموضع مطلق بأي حجم داخل أبيه. تقارن صفحة توسيط div هذه الطريقة بـ flexbox وgrid.

أخطاء شائعة

تصريحا transform. اللاحق يفوز كليًا. اجمع الدوال، أو استخدم الخصائص rotate وscale وtranslate.
تحويل عنصر سطري. يتجاهل <span> أو <a> العاديان transform. اجعله inline-block.
توقع أن يتحرك الجيران. التحويلات لا تغيّر التخطيط أبدًا. لإفساح مساحة غيّر width أو margin أو gap.
ترتيب خاطئ للدوال. rotate() قبل translate() تحرّك على المحور المُدار.
مفاجآت مع أبناء position: fixed. العنصر المحوَّل يصبح الكتلة الحاوية لأحفاده ذوي الموضع الثابت، فتتمرر معه الترويسة الثابتة التي بداخله. كما ينشئ سياق تراكب جديدًا لـ z-index.

الأسئلة الشائعة

ماذا تفعل transform في CSS؟

تغيّر طريقة رسم العنصر: تحريكه (translate)، أو تغيير حجمه (scale)، أو تدويره (rotate)، أو إمالته (skew). يحتفظ العنصر بمكانه الأصلي في التخطيط، فلا تتحرك العناصر المحيطة به.

كيف أطبّق أكثر من تحويل في CSS؟

اذكرها في قيمة transform واحدة تفصل بينها مسافات: transform: translateX(50px) rotate(20deg) scale(1.2);. كتابة تصريح transform ثانٍ تستبدل الأول بدل أن تضيف إليه.

هل يهم ترتيب دوال التحويل؟

نعم. بقراءة القيمة من اليسار إلى اليمين (كما تُكتب الشيفرة)، تعمل كل دالة في المحاور التي تركتها الدوال السابقة، فتحرّك rotate(45deg) translateX(100px) العنصر على محور مُدار، بينما تحرّكه translateX(100px) rotate(45deg) بشكل مستقيم ثم تديره.

ما هي transform-origin؟

النقطة الثابتة التي يحدث حولها تغيير الحجم والتدوير والإمالة. الافتراضي هو المركز (50% 50%). تجعل transform-origin: top left العنصر يكبر من زاويته العلوية اليسرى أو يدور حولها.

لماذا لا تعمل transform على عنصر span عندي؟

لا تنطبق التحويلات على العناصر السطرية غير المستبدلة مثل <span> أو <a> العاديين. أعطِ العنصر display: inline-block أو block فتعمل التحويلات.

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