آموزش چرخش تصاویر و متن با کد css

آموزش چرخش تصاویر و متن با کد css

آموزش چرخش تصاویر و متن با کد 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);
}

لینک کوتاه:

https://a4fran3.ir/?p=16421

Subscribe
Notify of
guest
0 نظرات
Inline Feedbacks
مشاهده همه نظرات

مطالب تصادفی