()skewX

با استفاده از تابع skewX که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای دو بعدی به صورت کج یا مورب تغییر شکل دهید.

می توانید اینطور تصور کنید زمانی که زاویه این تابع مثبت است راس بالا سمت چپ مستطیل و راس پایین سمت راست آن در جهت مخالف هم و در راستای محور X کشیده می شوند در نتیجه مستطیل تبدیل به یک متوازى الاضلاع می شود. وقتی زاویه به 90 درجه می رسد عنصر ناپدید می شود. و اگر زاویه 180 درجه باشد تغییر شکلی دیده نمی شود. همینطور اگر زاویه منفی باشد راس بالا سمت راست و راس پایین سمت چپ عنصر به همین صورت کشیده می شوند.

نمونه هایی از مقدار دهی به این تابع:

  transform: skewX(30deg);
  transform: skewX(-30deg);
  transform: skewX(-0.5rad);
  transform: skewX(-1turn);
  transform: skewX(-90deg);

تصویر زیر نمونه ای از این تغییر شکل را نشان می دهد:

توجه داشته باشید وقتی که یک عنصر بوسیله این تابع تغییر شکل پیدا می کند سیستم مختصاتی آن هم از این تغییر تاثیر می پذیرد. پس اگر در ادامه استفاده از این تابع می خواهید از توابع دیگر هم برای انجام عملیات دیگری استفاده کنید حتما توجه داشته باشید که تغییرات جدید بر اساس سیستم مختصاتی جدید عنصر اعمال می شوند.

لطفا با تغییر مقادیر تابع در دموی زیر به درک بهتر موضوع کمک کنید. توجه داشته باشید که تغییر شکل در حالت hover صورت می گیرد و همینطور از transition برای واضح شدن حرکت استفاده شده است:

See the Pen skewX() by Mojtaba Seyedi (@seyedi) on CodePen.

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