الموضوع
اقرأ ايضًا
التعليقات
عن الكاتب
تعليمات
في هذه التدوينة سنشارككم في قسم Css حول كيفية إنشاء تأثير الإنقلاب على الصورة. في الأسفل استخدم صورة كمثال على ذلك, التأثير يدعم العديد من المتصفحات بالتحديث الأحدث مثل كروم، فايرفوكس، وسفاري باستثناء الأوبرا،بما في ذلك الأجهزة الذكية.. يمكن إستخدام هذه الخاصية في بوسترات الألعاب أو الأفلام أو غيرها
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن ]]></b:skin> أو إذا أردت إستعمال الكود بداخل تدوينة واحدة أو أكثر فضع الكود بين هذين <style>هنا الكود</style> في تبويب HTML
3. ضع الكود التالي فوقه
1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن ]]></b:skin> أو إذا أردت إستعمال الكود بداخل تدوينة واحدة أو أكثر فضع الكود بين هذين <style>هنا الكود</style> في تبويب HTML
3. ضع الكود التالي فوقه
.container-card { position:relative; height:300px; width:300px; margin:20px auto; }
.container-card > div { position:absolute; left:0; top:0; width:300px; height:300px; padding:20px; -webkit-transition:1.5s ease-in-out; -moz-transition:1.5s ease-in-out; transition:1.5s ease-in-out; }
.container-card > div.back { -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-transform:perspective(800px) rotateY(180deg); -webkit-transform:perspective(800px) rotateY(180deg); transform:perspective(800px) rotateY(180deg); }
.container-card > div.front { -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-transform:perspective(800px) rotateY(0deg); -webkit-transform:perspective(800px) rotateY(0deg); transform:perspective(800px) rotateY(0deg); }
.container-card:hover > div.back { -moz-transform:perspective(800px) rotateY(0); -webkit-transform:perspective(800px) rotateY(0); transform:perspective(800px) rotateY(0);}
.container-card:hover > div.front { -webkit-transform:perspective(800px) rotateY(-179.9deg); -moz-transform:perspective(800px) rotateY(-179.9deg); transform:perspective(800px) rotateY(-179.9deg); }
4. ضع الكود التالي أينما تشاء<div class="container-card">
<div class="front">
<img src="ضع هنا الصورة الأولى" /></div>
<div class="back">
<img src="ضع هنا الصورة الثانية" /></div>
</div>
ملحوظة:
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻
إرشادات
- موقع : Mediafire
- موقع :file-upload
- باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
- تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
- كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
- إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
تحميل الملفات
أين تجدنا؟
كلمة الختام
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم
شكراً لك على هذا التدوينة الرائعة
ردحذفاخي هل يمكنك النظر لهذا القالب و التدوينة الأولى القالب من تصميمي لاكن واجهتني هذه المشكلة يرجى حلها ارجوووك : http://flat-web.blogspot.fr/
ردحذفلكل من يريد ان اصمم له موقع ينافس به مواقع بلده يتصل بي
ردحذفhttps://www.facebook.com/br.don.moh
أشكرك أخي حسام على التدوينات القيمة التي لا تبخل علينا بها ولكن لوسمح أين سأضع الكود الدي في المرحلة الرابعة هل في داخل المنشوور أم في html وشكرا لك تحياتي
ردحذفنعم ضعه في داخل المنشور بتبويب HTML
حذف