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

هذه مُجرَّد مُعاينة لتصميم تم اختياره من موقع Hitskin.com
تنصيب التصميم في منتداكالرجوع الى صفحة بيانات التصميم

منتدى الدعم و المساعدة لأحلى المنتديات
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

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

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

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

مُساهمة من طرف JoryAbdallah السبت 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);
}
ذكر المصدر عند النقل بارك الله فيكم
دمتم بخير
JoryAbdallah
JoryAbdallah
 
 

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

http://taqnyiat.ahlamontada.com/

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

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

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

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