با بهره بری و استفاده از تابع translateZ که جهت ویژگی transform مشخص کردن می می شود می قدرت یک عنصر را در فضای سه بعدی در جهت محور Z جابجا کرد.

مقداری که آن تابع می پذیرد می تواند واحد طولی یا درصدی داشته باشد. و همچنین آن مقدار باعث حرکت عنصر در راستای محور Z می می شود.

در زیر نمونه هایی از بهره بری و استفاده از آن تابع آورده شده می باشد:

transform: translateZ(300px);
transform: translateZ(-50%);
transform: translateZ(150%);

از واحدهای غیره ای مثل em و همچنین rem و همچنین قسمت و بخش و همچنین غیره هم می توانید جهت مقدار دهی به آن تابع بهره بری و استفاده کنید. همینطور مقدار می تواند منفی باشد. که در آن صورت عنصر در خلاف محور Z تغییر مکان خواهد داد.

لطفا دموی زیر را بررسی کردن کنید. توجه داشته باشید که تغییر مکان در حالت hover صورت می گیرد و همچنین همینطور از transition جهت واضح شدن حرکت بهره بری و استفاده شده می باشد:

See the Pen translateZ() by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی نرم افزار مرورگر اینترنتی ها