جعل صورتين تدور بشكل (قلاب) على محور X او محور Y -سلايد قلاب

جعل صورتين تدور بشكل (قلاب) على محور X او محور Y -سلايد قلاب

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

معاينة

اولا علينا التسيجل في بلوجر ◄ القالب ◄تحرير HTML ◄  نبحث(F+Ctrl) عن هذا الوسم ]]></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> 

اتمنى ان يكون الموضوع قد نال اعجابكم كما اتمنى ان تشاركوه مع اصدقائكم -دمتم بخير

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email