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

**Admin** · **Admin** الإثنين أغسطس 10, 2015 10:40 am

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

الألعاب أو الأفلام أو غيرها

شرح طريقة التركيب
1 . توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن ]]></b:skin> أو إذا أردت إستعمال الكود بداخل تدوينة واحدة أو أكثر فضع الكود بين هذين
<style>هنا الكود</style>
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>

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

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

للمشاركة انت بحاجه الى تسجيل الدخول او التسجيل

التسجيل

تسجيل الدخول