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