تابع ()translate3d در CSS

translate3d() Function

تابع ()translate3d در CSS عنصر را در فضای 3 بعدی، در راستای محور های (X,Y,Z) جابجا می‌کند.

نحوه نوشتار

transform: translate3d(30px ,0 , 20px);
transform: translate3d(-10% , 10%, 50px);

transform: translate3d(x, y, z);

مقادیر

X

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

Y

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

Z

عنصر را در راستای محور سوم (ارتفاع) یا Z جابجا می کند.

جابجایی که توسط این تابع CSS انجام می شود در سه محور X , Y و Z اتفاق می افتند.

نکته: چون این تابع در محور سوم نیز فعال است٬ برای بکارگیری آن باید از تابع دیگری بنام ()perspective در عنصر مورد نظر استفاده شود.

در مثال زیر نحوه عملکرد این تابع 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;
    justify-content: space-around;
}
.wrapper section {
    display: flex;
    margin: 20px 0;
}
div {
    width: 90px;
    height: 90px;
}
.box1,
.box3 {
    background-color: lightgreen; 
}
.box2,
.box4 {
    background-color: pink; 
}
.box2 {
    transform: perspective(550px) translate3d(20px, -10px, 100px); 
}
.box4 {
    transform: perspective(550px) translate3d(-20px, 50px, -100px); 
}

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

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