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

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

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

مُساهمة من طرف JoryAbdallah في السبت 5 سبتمبر 2015 - 1:56

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

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

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

انثى
عدد المساهمات : 4210
معدل النشاط : 6022
السُمعة : 292

http://taqnyiat.ahlamontada.com/

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

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


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