تابع ()skew در CSS

skew() Function

تابع ()skew در CSS عنصر را در فضای دو بعدی (در راستای محور افقی و عمودی) کج می شود.

نحوه نوشتار

transform: skew(11deg, 20deg);

transform: skew(x,y);

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

مقادیر

X

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

Y

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

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

html

<section>
   <div class="box">this is normal box.</div>
</section>
<section>
   <div class="box1">this is the box1.</div>
   <div class="box2">this is the box2.</div>
   <div class="box3">this is the box3.</div>
</section>

css

section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
div {
    width: 130px;
    height: 130px;
    margin: 15px 0;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    background-color: lightgreen; 
}
.box1 {
    transform: skew(20deg); 
}
.box2 {
    transform: skew(0, 15deg); 
}
.box3 {
    transform: skew(-40deg, 20deg); 
}

مشاهده و ویرایش کد در حالت تمام صفحه

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