با استفاده از تابع skew که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای دو بعدی به صورت کج یا مورب تغییر شکل دهید.
می توانید اینطور تصور کنید که دو راس رو به روی یک مستطیل را گرفته و در جهت مخالف هم بکشید. در نتیجه مستطیل تبدیل به یک متوازى الاضلاع می شود:
این تابع دو زاویه به عنوان پارامتر می گیرد که اولی عنصر را در راستای محور X کج می کند و دومی در راستای محور Y این تغییر شکل را انجام می دهد. اگر مقدار دوم تعیین نشود صفر در نظر گرفته می شود.
.element {
transform: skew(20deg, -15deg);
}
نکته مهم اینکه تابع skew در پیش نویس های اولیه ارایه شد و تا الان حذف شده است اما هنوز در برخی پیاده سازی ها استفاده می شود. از این تابع استفاده نکنید و برای اینگونه تغییر شکل ها از توابع skewX و skewY استفاده کنید.
سلام مقاله که انتشار کردید واسه ای سال 94
الان دیگه 99 هستیم به 1400
شما فرمودید که استفاده نکنیم از skew که به درستی عمل نمی کنه
اما تا الان که ما داریم استفاده میکنیم مشکلی پیش نیومد و توی مروگر های مختلف به درستی جواب میده
سلام، این موضوع همچنان برقرار هستش.
این نوع پشتیبانی مثل بقیه موارد نیست. نکته اینجاست که این تابع جز استانداردها نیست و یک روزی حذف میشه:
https://drafts.csswg.org/css-transforms/#funcdef-transform-skew
واسه همون چون شما پروژه هایی که درست میکنید قراره در سالهای آینده هم به درستی عمل کنه، به جای skew از skewX و skewY استفاده کنید که در آینده نیاز به تغییر آنها نداشته باشین. (حالا این سالهای آینده کی میاد بستگی به مرورگرها داره ولی خب ما طبیعتا باید آماده باشیم)