css3 تحول التحول على جانب واحد

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

معالجة المشكلة

في حالتك المحددة ، فأنت بحاجة إلى تحويل CSS3 إلى جانب واحد من صورة واحدة من MAINTING A BRASPERENT. لن يحقق الحل المقدم باستخدام الحدود الصلبة هذا التأثير بشكل فعال. على سبيل المثال ، إذا كنت قد قمت بتطبيق انحراف 20 درجة على الحاوية الأصل ، فأعطير القيمة المتداخلة (صورة) Div A من قيمة -20 درجة.

الفائض: مخفي. } #parallegogram { العرض: 150 بكسل ؛ الارتفاع: 100px ؛ الهامش: 0 0 -20px ؛ التحويل: منحرفة (20deg) ؛ الخلفية: أحمر. الفائض: مخفي. الموقف: قريب } .اماج { الخلفية: url (http://placekitten.com/301/301) ؛ الموقف: مطلق ؛ أعلى: -30 بكسل ؛ اليسار: -30 بكسل ؛ اليمين: -30 بكسل ؛ أسفل: -30 بكسل ؛ التحويل: منحرفة (-20deg) ؛ }

سيقوم هذا الكود بإنشاء انحراف 20 درجة على حاوية متوازي Red. داخلها ، سيتم وضع صورة في Div متداخلة مع انحراف -20 درجة ، مما يعكس بشكل فعال الانحراف المطبق على الحاوية الأصل وكشف المنطقة المنحرفة الشفافة خلفها.