آموزش چرخش تصاویر و متن با کد css
با عرض سلام خدمت تمام دوستان عزیز. خیلی از دوستان در به حرکت در آوردن تصاویر دچار مشکل میشوند . امروز برای شما کد CSS را آماده کرده ایم که به کمک این کد میتوانید تصاویر خود را بچرخانید.
آموزش چرخش تصاویر و متن:
به فرض مثال کد تصویر ما :
<img src="photo.jpg" alt="A4Fran3 Company" Class="A4Fran3">در کد بالا بجای photo.jpg لینک تصویر خود را قرار دهید. سپس کد زیر را در style خود قرار دهید
.a4fran3:hover {-webkit-transition : rotate(-5deg);
-moz-transform : rotate(-5deg);
-o-transition : rotate(-5deg);
}برای نرم کردن یا آهسته تر کردن در چرخش کافیست کد زیر را به کلاس A4fran3 اضافه کنیم
-webkit-transition : all 0.5s ease-in-out;
-moz-transition : all 0.5s ease-in-out;
-o-transition : all 0.5s ease-in-out;
شما میتوانید مقدار جابجایی که بر حسب ثانیه میباشد را تغییر دهید.
در مجموع کد بالا به این صورت باید در استایل ما قرار گیرد :
.a4fran3 {-webkit-transition : all 0.5s ease-in-out;
-moz-transition : all 0.5s ease-in-out;
-o-transition : all 0.5s ease-in-out;
}.a4fran3:hover {-webkit-transition : rotate(-5deg);
-moz-transform : rotate(-5deg);
-o-transition : rotate(-5deg);
}
