التحويلات (Transforms) — CSS المتقدم

التحويلات (Transforms)

transform يحرك العنصر ويدوره ويكبره بصرياً فقط: مكانه الأصلي في التخطيط يبقى محجوزاً، والعناصر المجاورة لا تتحرك. لهذا هو أساس الحركات السلسة.

الدوال الأساسية

.a { transform: translate(20px, -10px); }   /* إزاحة أفقية ورأسية */
.b { transform: translateY(-4px); }
.c { transform: rotate(15deg); }            /* دوران مع عقارب الساعة */
.d { transform: scale(1.1); }               /* تكبير 110% */
.e { transform: scale(1, 0.5); }            /* عرض كما هو، ارتفاع النصف */
.f { transform: skewX(-10deg); }            /* إمالة */

- النسبة المئوية في translate من حجم العنصر نفسه: translate(-50%, -50%) يزيحه بنصف عرضه وارتفاعه (أساس التوسيط القديم).

- الوحدات: deg أو turn (0.5turn = 180°).

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

عدة تحويلات تُطبق من اليمين لليسار على نظام إحداثيات يتغير:

.one { transform: rotate(45deg) translateX(100px); }  /* يتحرك على المحور المائل */
.two { transform: translateX(100px) rotate(45deg); }  /* يتحرك أفقياً ثم يدور مكانه */

النتيجتان مختلفتان تماماً. جرّبهما في المتصفح.

⚠️ تعريف transform مرة ثانية يستبدل الأولى بالكامل: .card:hover { transform: scale(1.05); } يلغي translateY المكتوب في الحالة الأساسية.

الخصائص المستقلة (حديثة)

.card { translate: 0 0; scale: 1; rotate: 0deg; }
.card:hover { translate: 0 -4px; }          /* لا يلغي scale أو rotate */
.card.selected { scale: 1.05; }

translate و rotate و scale خصائص منفصلة مدعومة في كل المتصفحات الحديثة: تُدمج ولا تستبدل بعضها، وتُحرَّك كلٌّ على حدة.

transform-origin: نقطة الارتكاز

الافتراضي مركز العنصر. للدوران حول زاوية:

.door { transform-origin: inline-start center; transform: rotateY(-30deg); }
.menu { transform-origin: top center; transform: scaleY(0); }   /* قائمة تنفتح من الأعلى */

ثلاثي الأبعاد

.scene { perspective: 800px; }           /* على الأب: "مسافة العين" — أصغر = منظور أقوى */
.card3d {
    transform-style: preserve-3d;        /* الأبناء في فضاء ثلاثي حقيقي */
    transition: transform 0.6s;
}
.scene:hover .card3d { transform: rotateY(180deg); }
.face { backface-visibility: hidden; }   /* لا ترى الوجه الخلفي عند الدوران */
.back { transform: rotateY(180deg); }

هذه وصفة "البطاقة القابلة للقلب" في المثال الكامل.

الأداء

المتصفح يحرّك transform و opacity على وحدة الرسوميات دون إعادة حساب التخطيط — لذلك هما الخاصيتان المفضلتان للحركة. تحريك top أو width أو margin يجبر المتصفح على إعادة حساب مواقع العناصر في كل إطار (تقطّع على الأجهزة الضعيفة).

RTL

الإزاحة لا تنقلب مع الاتجاه: translateX(20px) يمين في الصفحتين. لحركة "للأمام في اتجاه القراءة" اعكس الإشارة في [dir="rtl"] أو استخدم متغيراً (درس الخصائص المنطقية).

تمرين

اصنع بطاقة ترتفع 4px وتكبر قليلاً عند المرور باستخدام translate و scale المستقلتين، ثم بطاقة قابلة للقلب ثلاثية الأبعاد تعرض صورة في الأمام ونصاً في الخلف.

/* النقل */
.move-right {
    transform: translateX(100px);
}

.move-diagonal {
    transform: translate(50px, 30px);
}

/* الدوران */
.rotate-45 {
    transform: rotate(45deg);
}

.rotate-hover {
    transition: transform 0.5s;   /* على الحالة الأساسية: يتحرك ذهاباً وإياباً */
}
.rotate-hover:hover {
    transform: rotate(360deg);
}

/* التكبير */
.scale-up {
    transform: scale(1.5);
}

.scale-hover:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
}

/* الإمالة */
.skew-box {
    transform: skewX(-10deg);
}

/* تحويلات متعددة */
.complex-transform {
    transform: translateY(-50%) rotate(45deg) scale(1.2);
}

/* نقطة المركز */
.rotate-corner {
    transform-origin: top left;
    transform: rotate(15deg);
}

/* Card Flip */
.card {
    perspective: 1000px;
}

.card-inner {
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    backface-visibility: hidden;
}

.card-back {
    transform: rotateY(180deg);
}