این آموزش در تاریخ ۱۴۰۰/۱۰/۲۰ آپدیت شده است.

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

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

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

Free-Learn

تابع Skew در CSS

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

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

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

نسخه CSS3

Free-Learn

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

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

مثال شماره ۱ : استفاده از یک مقدار

امتحان کنید

مثال شماره ۲ : استفاده از ۲ مقدار ( مقدار اول برای محور X و مقدار دوم برای محور Y )

امتحان کنید

Free-Learn

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

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

نام تابع Chrome Firefox Opera Safari Edge
()skew بله بله بله بله بله

Free-Learn

شکل نوشتاری

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

Free-Learn

جدول مقادیر

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

مقدار توضیح
X , Y  زاویه کج شدن عناصر در محور X و Y
واحد deg ( درجه )
واحد grad ( گرید یا گراد )
واحد rad ( رادیان )
واحد turn ( گردش )
مثال : استفاده از ۲مقدار مجزا
X_Y زاویه کج شدن عناصر در محور X و Y
واحد deg ( درجه )
واحد grad ( گرید یا گراد )
واحد rad ( رادیان )
واحد turn ( گردش )
مثال : استفاده از ۱مقدار

Free-Learn

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

  • از مقادیر منفی میتوان در این تابع استفاده کرد، مقدار منفی دقیقا برعکس مقدار مثبت عمل میکند
  • هرچند از واحدهای grad , rad و turn میتوان استفاده کرد ولی معمولا این واحدها در اکثر مرورگرها به درستی پشتیبانی نمی شوند، لذا بهتر است از واحد deg استفاده شود

Free-Learn

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