إضافة لجعل صورتين تدور بشكل قلاب لمدونات بلوجر
عدد مشاهدات الموضوع:
1570
مرحبا اصدقائي من الخدع الجميلة التي احببت ان اشاركها اياكم هي خاصية تجعل
الصور تدور بشكل راسي او جانبي لتظهر صورة اخرى مخفية ورائها - هذه الخدعة
مفيدة لأصحاب مواقع شروحات الفوتوشوب والتصميم وكذلك المأكولات والصناعات
اليدوية لمقارنة الصور قبل وبعد التصميم مثل الخاصية المشروحة مسبقا من
صديقنا أيوب بعنوان إضافة للمقارنة بين صورتين باستخدام شريط سهل الحركة يتوسطهما لمدونات بلوجر وبالنسبة لإضافتنا الأن يمكنك معاينة ما سيحدث قبل الاضافة من هنا المعاينة. اذا أعجبتك الخدعة يمكنك اتباع الخطوات التالية لتنفيذها
اولا علينا التسيجل في بلوجر ◄ القالب ◄تحرير 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);}
- اذا اردت ان تدور الصورتين حول محور Y (بشكل راسي ) تستخدم الكود التالي
