با استفاده از تابع scale3d که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای سه بعدی بزرگتر یا کوچکتر نمایش دهید.
این تابع برخلاف نسخه دو بعدی آن یعنی ()scale سه مقدار می گیرد. که مقادیر عددهایی بدون واحد هستند. مقدار اول sx است که موجب کوچک و یا بزرگ شدن عنصر در جهت محور X می شود. مقدار دوم sy است که موجب کوچک و یا بزرگ شدن عنصر در جهت محور Y می شود. و به همین صورت مقدار سوم sz است که موجب کوچک و یا بزرگ شدن عنصر در جهت محور Z می شود.
اگر مقدار بزرگتر از 1 باشد عنصر در راستای محور معلوم بزرگ می شود, اگر مقدار برابر با یک باشد عنصر تغییر اندازه نخواهد داشت. اگر مقدار بین صفر و یک باشد عنصر کوچک تر از اندازه اصلیش نمایش داده می شود و در نهایت اگر مقدار منفی باشد تغییرات به همین صورت انجام می شود اما عنصر با توجه به جهتی که منفی مقدار گرفته است برگردانده می شود.
در زیر مثال هایی از موارد صحیح استفاده از این تابع نوشته شده اند:
transform: scale3d(1, 1, 1); /* عنصر تغییری نمی کند */
transform: scale3d(2, 2, 2); /* عنصر دو برابر از حالت اصلی نمایش داده می شود */
transform: scale3d(1, 2, 0);
transform: scale3d(2, 1, 3);
transform: scale3d(-1, -1, -1);
دموی زیر را بررسی کنید:
See the Pen scale3d by Mojtaba Seyedi (@seyedi) on CodePen.
خب آخه چه تغییری میکنه؟؟؟شما محور زد هارو 1000 برابر هم کنی هیچ تغییری نمیکنه پس فایدش چیه؟
سلام. ()scaleZ و ()scale3d در صورتی عمل میکنند که شما یک ()translateZ هم قرار داده باشید.