تابع ()translate در CSS

translate() Function

تابع ()translate در CSS مکان عنصر را در راستای دو محور عمودی و افقی (X,Y) تغییر می دهد.

نحوه نوشتار

transform: translate(30px);
transform: translate(10%);
transform: translate(50px, 50%);
transform: translate(30%, 200px);

transform: translate(x, y);

مقادیر

X

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

Y

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

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

html

<section class="wrapper">
    <section class="first-wrap">
        <div class="box">box</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </section>
    <section class="sec-wrap">
        <div class="box1">
          <div class="box2">box2</div>
        </div>
    </section>
</section>

css

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.first-wrap {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.first-wrap div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    width: 90px;
    height: 90px;
    background-color: lightgreen;
}
.first-wrap .box2 {
    transform: translate(20px, 3.5rem);
    background-color: pink;
}
.sec-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
.sec-wrap .box1 {
    width: 300px;
    height: 200px;
    border: 1px solid #555555;
}
.sec-wrap .box2 {
    width: 80px;
    height: 80px;
    background-color: pink;
    transform: translate(50%, 100%);
}

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

نکته: یکی از موارد استفاده از تابع ()translate، در مرکز قرار دادن عنصر با ویژگی display: absolute در عنصر display: relative والد می باشد. در مثال زیر این نحوه استفاده از این تابع CSS را میبینیم:

html

<section>
    <div class="box"></div>
</section>

css

body { padding: 20px; }
section {
    height: 300px;
    width: 100%;
    position: relative;
    border: 5px solid #555555;
    background-color: rgb(255, 225, 248)
    box-sizing: border-box;
}
.box {
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: dodgerblue;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

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