تابع ()translateX در CSS

translateX() Function

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

نحوه نوشتار

transform: translateX(30px);
transform: translateX(-10%);

transform: translate(x);

مقادیر

عنصر را در راستای محور افقی (X) جابجا می کند. این مقدار می تواند با استفاده از واحدهای اندازه CSS مانند (px, em, rem) مقداری ثابت باشد یا با استفاده از درصد، به میزان درصدی از عرض عنصر مورد نظر، عنصر را جابجا کند.

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

html

<section class="wrapper">
    <section>
        <div class="box1"></div>
        <div class="box2"></div>
    </section>
    <section>
        <div class="box3"></div>
        <div class="box4"></div>
    </section>
</section>

css

.wrapper {
    display: flex;
    justify-content: space-around;
}
.wrapper section {
    display: flex;
    flex-direction: column;
    margin: 20px 0;
}
div {
    width: 90px;
    height: 90px;
}
.box1,
.box3 {
    background-color: lightgreen; 
}
.box2,
.box4 {
    background-color: pink; 
}
.box2 {
    transform: translateX(-10px); 
}
.box4 {
    transform: translateX(50%); 
}

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

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