23‏/04‏/2015

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




شرح طريقة التركيب
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>
في هذه التدوينة سنشارككم في قسم Css حول كيفية إنشاء تأثير الإنقلاب على الصورة. في الأسفل استخدم صورة كمثال على ذلك, التأثير يدعم العديد من المتصفحات بالتحديث الأحدث مثل كروم، فايرفوكس، وسفاري باستثناء الأوبرا،بما في ذلك الأجهزة الذكية.. يمكن إستخدام هذه الخاصية في بوسترات الألعاب أو الأفلام أو غيرها




شرح طريقة التركيب
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>
5 Blogger تعليقات
Disqus
5 التعليقات
المشرف
avatar

شكراً لك على هذا التدوينة الرائعة

المشرف
avatar

اخي هل يمكنك النظر لهذا القالب و التدوينة الأولى القالب من تصميمي لاكن واجهتني هذه المشكلة يرجى حلها ارجوووك : http://flat-web.blogspot.fr/

المشرف
avatar
Jweel Rds 4/28/2015
delete

لكل من يريد ان اصمم له موقع ينافس به مواقع بلده يتصل بي
https://www.facebook.com/br.don.moh

المشرف
avatar

أشكرك أخي حسام على التدوينات القيمة التي لا تبخل علينا بها ولكن لوسمح أين سأضع الكود الدي في المرحلة الرابعة هل في داخل المنشوور أم في html وشكرا لك تحياتي

المشرف
avatar

نعم ضعه في داخل المنشور بتبويب HTML

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة