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 پشتیبانی می کنند.