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

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

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

الكود يوضع في
لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الوان>>ورقة تصميم ال 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
فريق المساعدة

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

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

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

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

بسم الله الرحمن الرحيم

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

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

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

الكود للنسخة الثالثة 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
فريق المساعدة
(CSS)كود قلب الصورة الشخصية عن مرور الماوس عليها***Mohamed Nsr Help_r10

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

تحياتي

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

» كود جعل وميض ع الصورة عند مرور الماوس عليها
» كود عمل زوم علي الصور في المساهمات عند مرور الماوس عليها
» عاوز كود لتكبير الصورة عند مرور الماوس عليها
» كود وضع ايطار للصورة الشخصية عند مرور الماوس عليها
» طلب كود يخص إضاءة الصور عند مرور الماوس عليها

صفحة 1 من اصل 1