این آموزش در تاریخ ۱۴۰۰/۱۰/۱۹ آپدیت شده است.
آموزش تابع Rotate در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع Rotate در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع Rotate در CSS
با استفاده از تابع rotate در CSS میتوان عناصر ( میخواد تصویر باشه یا باکس یا متن یاهرچیزی ) رو در زاویه های مختلف چرخوند. ( یعنی چرخش عناصر )
در این تابع هم از مقدار مثبت و هم منفی میتوان استفاده کرد، مقدار مثبت موافق جهت عقربه های ساعت عمل میکند و مقدار منفی مخالف جهت عقربه های ساعت.
این تابع به عنوان یک مقدار در ویژگی transform مورد استفاده قرار میگیرد.
| نسخه | CSS3 |
|---|
Free-Learn
مثال از تابع Rotate در CSS
در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : وقتی ماوس میره روی عکس ، ۳۶۰ درجه میچرخه
|
1 2 3 |
img:hover{ transform: rotate( 360deg ); } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع rotate در CSS پشتیبانی میکنند یا خیر.
| نام تابع | Chrome | Firefox | Opera | Safari | Edge |
| ()rotate | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.
|
1 |
rotate ( <angle> ); |
Free-Learn
جدول مقادیر
در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||
|---|---|---|---|
| <angle> | زاویه چرخش عنصر را با استفاده از واحدهای زیر مشخص میکند واحد deg ( درجه ) واحد grad ( گرید یا گراد ) واحد rad ( رادیان ) واحد turn ( گردش ) مثال :
|
Free-Learn
نکات و توضیحات
- از مقادیر منفی میتوان در این تابع استفاده کرد و باعث میشه عنصر برخلاف عقربه های ساعت بچرخد
- هرچند از واحدهای grad , rad و turn میتوان استفاده کرد ولی معمولا این واحدها در اکثر مرورگرها به درستی پشتیبانی نمی شوند، لذا بهتر است از واحد deg استفاده شود
