(CSS)كود قلب الصورة الشخصية عن مرور الماوس عليها***Mohamed Nsr

اذهب الى الأسفل

(CSS)كود تدوير الصور الشخصة اكثر من مره عند مرور الماوس عليها***Mohamed Nsr

مُساهمة من طرف Mohamed Nsr في الجمعة 13 يونيو 2014 - 18:55

بسم الله الرحمن الرحيم
السلام عليكم اخواني واخواتي
اليوم اقدم لكم كود تدوير الصورة الشخصيه اكثر من مره عند مرور الماوس عليها

ملحوظه :الكود يعمل فقط على النسخة الثالثه Phpbb3



صورة للكود

الكود يوضع في
لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الوان>>ورقة تصميم ال Css >>ضع الكود>>سجل

الكود:

.postprofile dt img:hover{
-webkit-transform: rotate(1800deg) scale(1);
-moz-transform: rotate(1800deg) scale(1);
-o-transform: rotate(1800deg) scale(1);
}
.postprofile dt img{
-webkit-transition: all 5s ease-in-out;
-moz-transition: all 5s ease-in-out;
-o-transition: all 5s ease-in-out;
}


منقول للافادة
وبهذا نكون انتهينا من شرح الكود التالي
بالتوفيق ليكم
MoHaMeD NsR
فريق المساعدة

تحياتي
  




 أدوات الصيانة لأحلى المنتديات / طريقة طلب كلمة سر/ قائمة بكل مواضيع الاســئلة الشائعة
--------------------------------------------------
 تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد!
 لا يتم المساعدة على الخاص! 


avatar
Mohamed Nsr
احلى إدارة
احلى إدارة

ذكر
عدد المساهمات : 13589
معدل النشاط : 13359
السُمعة : 452

https://www.egylive.org/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

(CSS)كود قلب الصورة الشخصية عن مرور الماوس عليها***Mohamed Nsr

مُساهمة من طرف Mohamed Nsr في السبت 14 يونيو 2014 - 17:56

بسم الله الرحمن الرحيم 
السلام عليكم اخواني واخواتي
اليوم اتيت اليكم بكود يقوم بقلب الصوره الشخصيه عند مرور الماوس عليها
صوره للكود:
قبل مرور الماوس عليها


وبعد مرور الماوس عليها



الكود للنسخة الثالثة Phpbb3:
الكود:
.postprofile dt a img{
width:130px;
height:130px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

.postprofile dt a img:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}

الكود للسخة الثانيةPhpbb2:
الكود:
.poster-profile img{
width:130px;
height:130px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

.poster-profile img:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}

الكود للنسخة PunBB:
الكود:
.user-basic-info a img {
width:130px;
height:130px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

.user-basic-info a img:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}

الكود للنسخة Invision:
الكود:
.postprofile-details dt a img {
width:130px;
height:130px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

.postprofile-details dt a img:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}


الكود يوضع في
لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الالوان>>روقة تصميم ال css >>ضع الكود>>سجل


منقول للافادة
وبهذا نكون انتهينا من شرح الكود التالي
بالتوفيق ليكم
MoHaMeD NsR
فريق المساعدة

تحياتي




 أدوات الصيانة لأحلى المنتديات / طريقة طلب كلمة سر/ قائمة بكل مواضيع الاســئلة الشائعة
--------------------------------------------------
 تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد!
 لا يتم المساعدة على الخاص! 


avatar
Mohamed Nsr
احلى إدارة
احلى إدارة

ذكر
عدد المساهمات : 13589
معدل النشاط : 13359
السُمعة : 452

https://www.egylive.org/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى