آموزش تابع Skew در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع Skew در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع Skew در CSS
با استفاده از تابع skew در CSS میتوان میزان کج شدن عناصر ( تصاویر یا … ) را در محور X ( بصورت افقی ) و Y ( بصورت عمودی ) مشخص و یا تعریف کرد.
اگر از یک مقدار در این تابع استفاده شود ، کجی در محور X بصورت افقی صورت میگیرد و اگر از ۲ مقدار استفاده شود، کجی هم در محور X و هم Y صورت میگیرد.
این تابع به عنوان یک مقدار در ویژگی transform مورد استفاده قرار میگیرد.
| نسخه | CSS3 |
|---|
Free-Learn
مثال از تابع Skew در CSS
در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : کج کردن تصویر فقط در محور X ( بصورت افقی )
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .f1:hover{ transform:skew(50deg); } .f2:hover{ transform:skew(100deg); } </style> |
مثال شماره ۲ : کج کردن تصویر هم در محور X هم Y
|
1 2 3 |
img:hover{ transform:skew(10deg,30deg); } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع skew در CSS پشتیبانی میکنند یا خیر.
» عددی که در کنار -webkit- و -moz- و -ms- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوند استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )
| نام تابع | Chrome | Firefox | Opera | Safari | IE |
| ()skew | ۳۶٫۰ ۴٫۰ -webkit- |
۱۶٫۰ ۳٫۵ -moz- |
۲۳٫۰ ۱۵٫۰ -webkit- ۱۰٫۵ -o- |
۹٫۰ ۳٫۲ -webkit- |
۱۰٫۰ ۹٫۰ -ms- |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.
|
1 |
skew ( <x> , <y> ) |
Free-Learn
جدول مقادیر
در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||
|---|---|---|---|
| <x> | زاویه کج شدن عناصر بصورت افقی را با استفاده از واحدهای زیر مشخص میکند واحد deg ( درجه ) واحد grad ( گرید یا گراد ) واحد rad ( رادیان ) واحد turn ( گردش ) مثال :
|
||
| <y> | زاویه کج شدن عناصر بصورت عمودی را با استفاده از واحدهای زیر مشخص میکند واحد deg ( درجه ) واحد grad ( گرید یا گراد ) واحد rad ( رادیان ) واحد turn ( گردش ) مثال :
|
Free-Learn
نکات و توضیحات
- از مقادیر منفی میتوان در این تابع استفاده کرد، مقدار منفی دقیقا برعکس مقدار مثبت عمل میکند.
- هرچند از واحدهای grad , rad و turn میتوان استفاده کرد ولی معمولا این واحدها در اکثر مرورگرها به درستی پشتیبانی نمی شوند، لذا بهتر است از واحد deg استفاده شود.
- برخی از مرورگرها در نسخه های قدیمی تر از این ویژگی پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.
- -webkit- برای مرورگر کروم و سافاری و اُپرا
- -moz- برای مرورگر موزیلا فایرفاکس
- -ms- برای مرورگر اینترنت اکسپلورر
Free-Learn
