تأثير إنقلاب الصورة

في هذه التدوينة سنشارككم في قسم 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>