الرئيسية
السلام عليكم ورحمة الله الكود سهل التعديل
عبارة عن التحكم بحجم الصور الكبيرة وعدم تجاوزها حد معين او مقياس معين دون التاثير بحجم الصور الصغيرة
بالاضافة الى اضافة حركة الدوران
تضاف بورقة css
الحركة الاولى صورة
http://i59.tinypic.com/2ue1mv8.gif
الكود
- الكود:
.postbody img {
max-width: 600px;
/* Resize the image for IE6 */
width: expression(this.width > 600 ? 600: true);
}
/*TILT*/
.postbody img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.postbody img:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
الحركة الثانية صورة
http://i60.tinypic.com/np3pn5.gif
الكود
- الكود:
.postbody img {
max-width: 600px;
/* Resize the image for IE6 */
width: expression(this.width > 600 ? 600: true);
}
/*MORPH*/
.postbody img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.postbody img:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
ذكر المصدر عند النقل بارك الله فيكم
دمتم بخير
