()skewY

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

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

skewY

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


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

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

skewY

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

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

 

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


 

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *