عمل دوران للصورة عند تمرير مؤشر الماوس عليها

عمل دوران للصورة عند تمرير مؤشر الماوس عليها

Amir Elsaeed

8:22 م تأثيرات CSS , كورسات

السلام عليكم ورحمة الله وبركاته

درس اليوم هو عبارة عن عمل دوران للصورة عند تمرير مؤشر الماوس عليها بإستخدام الـ CSS

كود الـ HTML تقدر تعدل الصور علي حسب حاجتك

     <div id="rotate">

         <img src="img1.gif">

         <img src="img2.gif">

         <img src="img3.gif0">

     </div>

كود الـ CSS

#rotate { 
 width: 800px; 
 margin: 0 auto; 
} 

#rotate img { 
 margin: 20px; 
 border: 5px solid #eee; 
 -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); 
 -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); 
 box-shadow: 4px 4px 4px rgba(0,0,0,0.2); 
 -webkit-transition: all 0.5s ease-out; 
 -moz-transition: all 0.5s ease; 
 -o-transition: all 0.5s ease; 
}

#rotate img:hover { 
 -webkit-transform: rotate(-7deg); 
 -moz-transform: rotate(-7deg); 
 -o-transform: rotate(-7deg); 
} 

شارك المقالة فيس بوك تويتر جوجل بلس لينكد إن

مقالات ذات صلة