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

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

يوجد الآن مشاهدة التعليقات : 5

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 5 تعليقات:

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

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

    ردحذف
  3. Jweel Rds4/28/2015

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

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

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

      حذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم