تعد تحويلات CSS رائعة ، لكنها لا تنطبق (بعد؟) على صور الخلفية. تقدم هذه المقالة حلاً لتلك الأوقات التي تريد فيها فعلاً تدوير صورة خلفية ، أو الحفاظ على صورة خلفية ثابتة أثناء تدوير عنصر الحاوية.

تم تحديث هذه المقالة في عام 2020. لمزيد من معرفة CSS المتقدمة ، اقرأ كتابنا ، CSS Master ، الإصدار الثاني.

يمكن تحجيم أي عنصر أو تحريفه أو تدويره باستخدام CSS3 transform الملكية. انها مدعومة في جميع المتصفحات الحديثة بدون بادئات البائع.

#myelement { transform: rotate(30deg);
}

أشياء عظيمة. ومع ذلك ، يقوم هذا بتدوير العنصر بالكامل - محتواه ، وحدته وصورة الخلفية. ماذا لو كنت تريد فقط تدوير صورة الخلفية؟ أو ماذا لو كنت تريد أن تظل الخلفية ثابتة أثناء تدوير المحتوى؟

لا يوجد اقتراح W3C CSS لـ background-image التحولات. سيكون مفيدًا بشكل لا يصدق ، لذلك ربما سيظهر أحدهم في النهاية ، لكن هذا لا يساعد المطورين الذين يرغبون في استخدام تأثيرات مماثلة اليوم.

أحد الخيارات هو إنشاء صورة خلفية جديدة من الصورة الأصلية ، على سبيل المثال استدارة بمقدار 45 درجة. يمكن تحقيق ذلك باستخدام:

1. عملية معالجة الصور من جانب الخادم
2. من جانب العميل canvas- رمز معالجة الصورة القائم على ، أو
3. واجهات برمجة التطبيقات التي تقدمها بعض خدمات CDN لاستضافة الصور.

ولكن كل هذا يتطلب جهودًا إضافية ومعالجة وتكاليف إضافية.

لحسن الحظ ، هناك حل قائم على CSS. في جوهره ، إنه اختراق يقوم بتطبيق صورة الخلفية على ::before or ::after عنصر زائف بدلاً من الحاوية الأصلية. يمكن بعد ذلك تحويل العنصر الزائف بشكل مستقل عن المحتوى.

تحويل الخلفية فقط

يمكن أن يتم تطبيق أي أنماط على عنصر الحاوية ، ولكن يجب ضبطه على position: relative، لأن العنصر الزائف الخاص بنا سيتم وضعه بداخله. يجب عليك أيضًا تعيين overflow: hidden ما لم تكن سعيدًا للخلفية التي تمتد خارج حدود الحاوية.

#myelement { position: relative; overflow: hidden;
}

يمكننا الآن إنشاء عنصر زائف محدد الموضع تمامًا بخلفية محولة. ال z-index ومن المقرر أن -1 للتأكد من ظهورها أسفل محتوى الحاوية:

#myelement::before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(background.png) 0 0 repeat; transform: rotate(30deg);
}

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

تثبيت الخلفية على عنصر متحول

يتم تطبيق جميع التحولات في الحاوية الرئيسية على العناصر الزائفة. لذلك ، نحن بحاجة إلى ذلك فك هذا التحول. على سبيل المثال ، إذا تم تدوير الحاوية بمقدار 30 درجة ، فيجب تدوير الخلفية بمقدار -30 درجة للعودة إلى وضعها الأصلي:

#myelement { position: relative; overflow: hidden; transform: rotate(30deg);
} #myelement::before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(background.png) 0 0 repeat; transform: rotate(-30deg);
}

مرة أخرى ، ستحتاج إلى ضبط الحجم والموضع لضمان أن الخلفية تغطي بشكل كاف الحاوية الرئيسية.

فيما يلي العروض التوضيحية ذات الصلة على CodePen:

انظر القلم
تحويل CSS3 على صور الخلفية بواسطة SitePoint (SitePoint)
on CodePen.

تعمل التأثيرات في جميع المتصفحات الرئيسية ويعيد Internet Explorer إلى الإصدار 9. من غير المرجح أن تظهر المتصفحات القديمة التحولات ولكن يجب أن تظل الخلفية تظهر.

المصدر: https://www.sitepoint.com/css3-transform-background-image/؟utm_source=rss