إضافة لجعل صورتين تدور بشكل قلاب لمدونات بلوجر

عدد مشاهدات الموضوع:
مرحبا اصدقائي من الخدع الجميلة التي احببت ان اشاركها اياكم هي خاصية تجعل الصور تدور بشكل راسي او جانبي لتظهر صورة اخرى مخفية ورائها - هذه الخدعة مفيدة لأصحاب مواقع شروحات الفوتوشوب والتصميم وكذلك المأكولات والصناعات اليدوية لمقارنة الصور قبل وبعد التصميم مثل الخاصية المشروحة مسبقا من صديقنا أيوب بعنوان إضافة للمقارنة بين صورتين باستخدام شريط سهل الحركة يتوسطهما لمدونات بلوجر وبالنسبة لإضافتنا الأن يمكنك معاينة ما سيحدث قبل الاضافة من هنا المعاينة. اذا أعجبتك الخدعة يمكنك اتباع الخطوات التالية لتنفيذها

اولا علينا التسيجل في بلوجر ◄ القالب ◄تحرير HTML ◄  نبحث(CTRL+F) عن هذا الوسم ]]></b:skin> ونضع اكواد الCSS فوقه مباشرة(قبله)
اكواد الCSS المستخدمة
div.flip{

position:relative;

width: 300px;

height: 250px;

-webkit-perspective: 600px; 

-moz-perspective: 600px;

-o-perspective: 600px;
perspective: 600px;
}
div.flip div.rotate{
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.6s ease-in-out 0.3s;
-webkit-transition: all 0.6s ease-in-out 0.3s;
-o-transition: all 0.6s ease-in-out 0.3s;
transition: all 0.6s ease-in-out 0.3s;
}
div.flip div.rotate > *{ 
position:absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
div.flip div.rotate > div{
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
background: #eee;
}
div.rotate.x *:nth-child(2){
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
div.flip:hover > div.rotate.x{
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
div.rotate.y *:nth-child(2){ 
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
div.flip:hover > div.rotate.y{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
الان نقوم بحفظ القالب حيث اصبح بامكاننا اضافة هذه الخاصية اللصور في اي مشاركة نريد فقط كل ما علينا ان ننسخ اكود HTML التالية في محرر HTML

- اذا اردت ان تدور الصورتين حول محور X (بشكل جانبي ) تستخدم الكود التالي
<div class="flip" style="width: 540px; height: 300px; display: inline-block;">
<div class="rotate x">
 <img src="رابط الصورة الاولى هنا">
 <img src="رابط الصورة الثانية هنا">
</div>
</div>
-  اذا اردت ان تدور الصورتين حول محور Y (بشكل راسي ) تستخدم الكود التالي
<div class="flip" style="width: 540px; height: 300px; display: inline-block;">
<div class="rotate y">
 <img src="رابط الصورة الاولى هنا">
 <img src="رابط الصورة الثانية هنا">
</div>
</div>
اتمنى ان يكون الموضوع قد نال اعجابكم كما اتمنى ان تشاركوه مع اصدقائكم -دمتم بخير

هناك تعليقان (2):

  1. شكرا على هذه الاضافة الرائعة
    بالفعل موقع متميز وكتاب رائعون
    لدي سؤال : كيف استطيع ان اضع صورة بعد العنوان على مدونتي في بلوجر مثل الصورة التي وضعتها فوق ولك جزير الشكر.

    ردحذف
  2. شكرا على هذه الاضافة الرائعة
    بالفعل موقع متميز وكتاب رائعون
    لدي سؤال : كيف استطيع ان اضع صورة بعد العنوان مثل الصورة التي وضعتها فوق ؟.

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية