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

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

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

Free-Learn

تابع Skew در CSS

با استفاده از تابع skew در CSS میتوان میزان کج شدن عناصر ( تصاویر یا … ) را در محور X ( بصورت افقی ) و Y ( بصورت عمودی ) مشخص و یا تعریف کرد.

اگر از یک مقدار در این تابع استفاده شود ، کجی در محور X بصورت افقی صورت میگیرد و اگر از ۲ مقدار استفاده شود، کجی هم در محور X و هم Y صورت میگیرد.

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

نسخه CSS3

Free-Learn

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

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

مثال شماره ۱ : کج کردن تصویر فقط در محور X ( بصورت افقی )

امتحان کنید

مثال شماره ۲ : کج کردن تصویر هم در محور X هم Y

امتحان کنید

Free-Learn

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

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

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

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

Free-Learn

شکل نوشتاری

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

Free-Learn

جدول مقادیر

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

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

Free-Learn

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

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

Free-Learn

دریافت PDF یا پرینت این مطلب