با استفاده از تابع 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.
سوال داری؟ برو به پنل پرسش و پاسخ