اضافة تأثير الحركة على الصورةعند مرور الماوس

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

معاينة الاضافة قبل التركيب

معـاينـــة

اولآ نفتح المدونة ومن لوحة التحكم  نضغط على تحرير القالب HTML
بعدها نبحث عن هذا الكود  ]]> بالضغط على

ونضيف الكود التالي :

.post img {
  border:10px solid #fff;
  overflow:hidden;
  -webkit-box-shadow:5px 5px 5px #111;
  box-shadow:5px 5px 5px #111;
  -webkit-transition:all .5s ease;
  -moz-transition:all .5s ease;
  -o-transition:all .5s ease;
  -ms-transition:all .5s ease;
  transition:all .5s ease;
  margin:20px;
}

.post img:hover {
  border-radius:50%;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);    
}

وبعدها نعمل حفظ ونروح نشوف المدونة وان شاء الله تكون تمت العملية

 واذا اردت الصور ثلاثية الابعاد بدون حركة  اعمل نفس الخطوات بس بدل الكود الاولى ضع هذا الكود واعمل حفظ

.post img:hover {
  border-radius:50%;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);
}

هذا كل شيء اتمنا ان تنال اعجابكم