()scale3d

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


 

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

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