(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 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

تحياتي