()translateZ

با استفاده از تابع 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.

 

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

سوالت رو توی پنل بحث و گفتگو مطرح کن.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *