skewX() Function
تابع ()skewX
در CSS عنصر را در راستای محور افقی (X
) کج می کند.
نحوه نوشتار
transform: skewX(45deg); transform: skewX(x);
مقادیر
X
مقداریست که میزان کج شدن عنصر در محور افقی (X
) بر حسب درجه را مشخص می کند.
در مثال زیر نحوه عملکرد این تابع 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> </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: skewX(20deg); } .box2 { transform: skewX(-40deg); }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این تابع CSS پشتیبانی می کنند.