اضافة تاثير الدوران الى الصور الخاص بمدونتك باستخدام خاصية Transforms

عدد مشاهدات الموضوع:
اضافة تاثير الدوران الى الصور الخاص بمدونتك باستخدام خاصية Transforms

السلام عليكم أعزائي زوار مدونتي,اليوم سنتعلم اضافة تاثير الدوران على الصور  بواسطة الCSS3. بكل صراحة خلق تاثير على الصورة هو امر بسيط جداً خاصة بعض ظهور الCSS3 ورغم ذلك  سأقوم بطرح خاصية من خصائص الCSS3 الا وهي transform مع الدالة  ()rotate.
قمت بشرح موضوع ال Transforms في تدوينات سابقة
الدالة ()rotate تجعل العنصر يدور باتجه عقارب الساعة حسب الزاوية المعطى له ,كما يمكن لهذه الدالة ادارة العنصر عكس اتجاه الساعة اذا كانت قيمة الزاوية سالبة.
سنقوم باضافة دوران للصور بمقدار 5 درجات مئوية 
قوم بتحرير قالبك>>ابحث(CTRL+F) عن الوسم التالي ]]></b:skin> والصق كود الCSS التالي فوقه مباشرة

 img.foto {
  background-color:#ffffff;
  border:0px;
  outline:none;
  padding:5px 5px 20px;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.7);
  box-shadow:0 1px 3px rgba(0,0,0,0.7);
}

img.foto:hover {
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  -ms-transform:rotate(5deg);
  -o-transform:rotate(5deg);
  transform:rotate(5deg);
} 
قم بحفظ القالب واذهب لتحرير مشاركة جديدة لتجريب الدوران على الصور >> في محرر HTML قم بلصق احد الاكواد الاتية
الصورة تحتوي على رابط
 <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-IMG"><img class="foto" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 240px;" src="http://4.bp.blogspot.com/-AyZquZyVMaE/VDDovJLh-mI/AAAAAAAACpA/Qgzy5KCNhKM/s1600/b81a7ed66e3.jpg" alt="" id="BLOGGER_PHOTO_ID_5636537814866564146" border="0" /></a>
 
الصورة بدون رابط
 <img alt="" class="foto" src="http://4.bp.blogspot.com/-AyZquZyVMaE/VDDovJLh-mI/AAAAAAAACpA/Qgzy5KCNhKM/s1600/b81a7ed66e3.jpg" height="640" width="581" /></div>
 
لو اردت ان تضيف هذا التاثير لكافة صور مدونتك قم بالبحث(CTRL+F) عن الوسم التالي ]]></b:skin> والصق كود الCSS التالي فوقه مباشرة

 img {
  background-color:#ffffff;
  border:0px;
  outline:none;
  padding:5px 5px 20px;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.7);
  box-shadow:0 1px 3px rgba(0,0,0,0.7);
}

img:hover {
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  -ms-transform:rotate(5deg);
  -o-transform:rotate(5deg);
  transform:rotate(5deg);
} 
الى هنا اترككم فر رعاية الله وحفظه, يمكنكم الأنضمام لأعضاء المدونة كما يمكنك الأنضمام للقروب الخاص بنا حيث سيصلك كل جديد .

هناك تعليقان (2):

  1. جميل جدا
    http://m3lomteyblog.blogspot.com/

    ردحذف
  2. اضافة جميلة
    http://android-apk9.blogspot.com

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية