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

مثال هایی از موارد صحیح بهره بری و استفاده از آن تابع:

transform: scaleZ(2); 
transform: scaleZ(1); /* عنصر دگرگونی و تغییری نخواهد کرد */
transform: scaleZ(0.25); 
transform: scaleZ(-1);

عملکرد آن تابع برابر می باشد با:

transform: scale3d(1, 1, 0, <number>);

از آنجایی که تمامی عناصر در CSS دو بعدی خواهند بود شاید سوال برایتان پیش بیاید که تابع scaleZ چگونه و چطوری عنصری که ضخامت ندارد را می تواند پهناور و بزرگ تر یا کوچک تر دیدن کردن و نمایش دهد؟ ولی باید توجه داشت در واقعیت و حقیقت آن تابع عنصر را همراه با محور Z پهناور و بزرگ یا کوچک می کند. تاثیر آن تابع زمانی که جهت عنصر حالت perspective تنظیم شده می باشد و همچنین عنصر در در فضای سه بعدی چرخانده و همچنین یا در جهت محور Z حرکت کرده باشد, قابل لمس تر خواهد بود.

هر دو تصویر زیر شامل مشخصات و همچنین شرایط یکسان خواهند بود و همچنین همچنین هر دو تصویر با بهره بری و استفاده از تابع translateZ در راستای محور Z حرکت داده شده اند, ولی باید توجه داشت تصویر سمت راست شامل ویژگی scaleZ با مقدار ۲ می باشد:

در مثال پایین تصاویر با بهره بری و استفاده از تابع rotateX حول محور X چرخانده شده اند و همچنین تفاوت آنها در مقدار scaleZ آنها می باشد:

توجه داشته باشید که ترتیب بهره بری و استفاده از توابع transform در زمان بهره بری و استفاده آنها اهمیت دارد پس در صورتی که به دنبال نتایج بالا هستید, ترتیب نوشتن توابع را رعایت کنید.

دموی زیر را بررسی کردن کنید:
 

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

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