تابع ()translateZ در CSS

translateZ() Function

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

نحوه نوشتار

transform: translateZ(40px);
transform: translateZ(-10%);

transform: translateZ(z);

مقادیر

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

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

در مثال زیر نحوه عملکرد این تابع 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;
    margin: 20px 0;
}
div {
    width: 90px;
    height: 90px;
}
.box1,
.box3 {
    background-color: lightgreen; 
}
.box2,
.box4 {
    background-color: pink; 
}
.box2 {
    transform: perspective(550px) translateZ(-150px); 
}
.box4 {
    transform: perspective(550px) translateZ(150px); 
}

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

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