توسيع Div من مركزه باستخدام CSS

في مجال تحويلات CSS، قد يتصور المرء أن عناصر div تتوسع بأمان من محورها المركزي ، بدلاً من السلوك الافتراضي للتوسيع من الزاوية العلوية اليسرى. ومع ذلك، فإن هذا التأثير المرغوب يمثل تحديًا بدون جافا سكريبت.

الحل: معالجة الهوامش

يكمن مفتاح تحقيق هذا التوسع المركزي في نقل هوامش div باستخدام محدد صيغة. تتضمن التقنية حساب الفرق بين الحجم المستهدف والحجم الأولي وتقسيم النتيجة على اثنين. يتم بعد ذلك تطبيق هذه القيمة كتعديل هامش سلبي أثناء الفترة الانتقالية.

خيارات التخصيص:

اعتمادًا على السلوك المطلوب، تتوفر ثلاثة خيارات رئيسية:

الخيار 1: الحفاظ على المساحة

يعمل هذا الخيار على توسيع div داخل المساحة المحجوزة حوله، مع ترك العناصر المحيطة دون أن تتأثر.

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: 55px; /* calculated as initial margin - ((width change and height change)/2) */
}

الخيار 2: تجاوز العناصر المحيطة

من خلال تعيين هوامش سلبية، يؤدي هذا الخيار إلى توسيع div فوق العناصر القريبة، وتداخل محتواها.

#مربع { -انتقال مجموعة الويب: العرض 1 ثانية، الارتفاع 1 ثانية، الهامش 1 ثانية؛ الانتقال: العرض 1 ثانية، الارتفاع 1 ثانية، الهامش 1 ثانية؛ } #مربع:تحوم { الهامش: -50 بكسل؛ /* يُحسب على أنه 0 - ((تغير العرض وتغير الارتفاع)/2) */

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: -50px; /* calculated as 0 - ((width change and height change)/2) */
}

الخيار 3: تبديل العناصر المحيطةيقوم هذا الاختلاف بإزاحة div ونقل العناصر اللاحقة إلى أسفل تدفق المستند.

#square { -انتقال مجموعة الويب: العرض 1 ثانية، الارتفاع 1 ثانية، الأعلى 1 ثانية، اليسار 1 ثانية، الهامش 1 ثانية؛ الانتقال: العرض 1 ثانية، الارتفاع 1 ثانية، الأعلى 1 ثانية، اليسار 1 ثانية، الهامش 1 ثانية؛ } #مربع:تحوم { أعلى: -50px؛ /* تم حسابه كقمة أولية - ((الارتفاع الجديد - الارتفاع الأولي)/2) */ اليسار: -50 بكسل؛ /* محسوب على أنه اليسار الأولي - ((العرض الجديد - العرض الأولي)/2) */ الهامش الأيمن: -50 بكسل؛ الهامش السفلي: -50 بكسل؛

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: -50px; /* calculated as 0 - ((width change and height change)/2) */
}

ملاحظة:

تنطبق هذه الحسابات على divs المربعة. بالنسبة للعناصر غير المربعة، قد تختلف حسابات تعديلات الهامش قليلاً اعتمادًا على تغيير الحجم النسبي المطلوب.