آموزش تابع Rotate در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع Rotate در CSS با من همراه باشید.

آموزش تابع Rotate در CSS

Free-Learn

تابع Rotate در CSS

با استفاده از تابع rotate در CSS میتوان عناصر ( میخواد تصویر باشه یا باکس یا متن یاهرچیزی ) را در یک فضای ۲بعدی و در زاویه های مختلف چرخوند. ( چرخش دادن )

هم از مقدار مثبت و هم منفی میتوان استفاده کرد، مقدار مثبت موافق جهت عقربه های ساعت عمل میکند و مقدار منفی مخالف جهت عقربه های ساعت.

این تابع به عنوان یک مقدار در ویژگی transform مورد استفاده قرار میگیرد.

نسخه CSS3

Free-Learn

مثال از تابع Rotate در CSS

در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : چرخش ۹۰درجه و ۳۶۰ درجه

امتحان کنید

مثال شماره ۲ : چرخش ۹۰ درجه منفی

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع rotate در CSS پشتیبانی میکنند یا خیر.

» عددی که در کنار -webkit- و -moz- و -ms- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوند استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )

نام تابع Chrome Firefox Opera Safari IE
()rotate ۳۶٫۰
۴٫۰ -webkit-
۱۶٫۰
۳٫۵ -moz-
۲۳٫۰
۱۵٫۰ -webkit-
۱۰٫۵ -o-
۹٫۰
۳٫۲ -webkit-
۱۰٫۰
۹٫۰ -ms-

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر

در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.

مقدار توضیح
<angle>  زاویه چرخش عنصر را با استفاده از واحدهای زیر مشخص میکند
واحد deg ( درجه )
واحد grad ( گرید یا گراد )
واحد rad ( رادیان )
واحد turn ( گردش )
مثال :

Free-Learn

نکات و توضیحات

  • از مقادیر منفی میتوان در این تابع استفاده کرد و باعث میشه عنصر برخلاف عقربه های ساعت بچرخد.
  • هرچند از واحدهای grad , rad و turn میتوان استفاده کرد ولی معمولا این واحدها در اکثر مرورگرها به درستی پشتیبانی نمی شوند، لذا بهتر است از واحد deg استفاده شود.
  • برخی از مرورگرها در نسخه های قدیمی تر از این ویژگی پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.
  • -webkit- برای مرورگر کروم و سافاری و اُپرا
  • -moz- برای مرورگر موزیلا فایرفاکس
  • -ms- برای مرورگر اینترنت اکسپلورر

Free-Learn

فروشگاه فری لرن
دریافت PDF یا پرینت این مطلب