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

السلام عليكم أعزائي زوار مدونتي,اليوم سنتعلم اضافة تاثير الدوران على الصور بواسطة الCSS3. بكل صراحة خلق تاثير على الصورة هو امر بسيط جداً خاصة بعض ظهور الCSS3 ورغم ذلك سأقوم بطرح خاصية من خصائص الCSS3 الا وهي transform مع الدالة ()rotate.

معاينة الإضافة

الدالة ()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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRlebcPUWSkCzIU58aqFshdJ-5gIp9e-4twyZVTzSFJuEcatQ7y_fUKq9b990BpR6WgKcLSWuuTEYMXl-d4XE5QTVq5yHetS7iCB8zhjOuua5btAAbLfQJa0-4KgTV4LJ_9ZGtlySuVI8/s1600/b81a7ed66e3.jpg" alt="" id="BLOGGER_PHOTO_ID_5636537814866564146" border="0" /></a>

الصورة بدون رابط

 <img alt="" class="foto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRlebcPUWSkCzIU58aqFshdJ-5gIp9e-4twyZVTzSFJuEcatQ7y_fUKq9b990BpR6WgKcLSWuuTEYMXl-d4XE5QTVq5yHetS7iCB8zhjOuua5btAAbLfQJa0-4KgTV4LJ_9ZGtlySuVI8/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);
}

الى هنا اترككم فر رعاية الله وحفظه, يمكنكم الأنضمام لأعضاء المدونة كما يمكنك الأنضمام للقروب الخاص بنا حيث سيصلك كل جديد .