كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة

اذهب الى الأسفل 
كاتب الموضوعرسالة
JoryAbdallah
 
 
JoryAbdallah


انثى
عدد المساهمات : 3029
معدل النشاط : 8415
السُمعة : 295

كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة Empty
مُساهمةموضوع: كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة   كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة Emptyالسبت 5 سبتمبر 2015 - 1:56

كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة
السلام عليكم ورحمة الله الكود سهل التعديل
عبارة عن التحكم بحجم الصور الكبيرة وعدم تجاوزها حد معين او مقياس معين دون التاثير بحجم الصور الصغيرة

بالاضافة الى اضافة حركة الدوران

تضاف بورقة css

الحركة الاولى صورة
كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة 2ue1mv8
https://2img.net/h/oi59.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);
}
الحركة الثانية صورة
كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة Np3pn5
https://2img.net/h/oi60.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);
}
ذكر المصدر عند النقل بارك الله فيكم
دمتم بخير
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://taqnyiat.ahlamontada.com/
 
كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» كود css التحكم بحجم الصور الكبيرة واضافة اطار حين مرور الماوس عليها
» كود css التحكم بحجم الصور بالمواضيع وعمل تاثير حركة عليها
» التحكم بحجم الصورة بالمساهمات
» التحكم بحجم الصور
» كود التحكم بحجم الصورة الشخصية للنسخة 3

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى ::   :: التقنيات المتقدمة :: الأكواد الإنسيابية CSS-
انتقل الى: