بروز رسانی اسفند ۱۰ام, ۱۳۹۹ ۶:۳۴ بعد از ظهر
فروردین ۱۵, ۱۳۹۵ admin آموزش پیشرفته css, آموزش مقدماتی css 0
با بهره بری و استفاده از تابع 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.
اسفند ۱۰, ۱۳۹۹ 0
بهمن ۲۵, ۱۳۹۹ 0
بهمن ۰۹, ۱۳۹۹ 0
بهمن ۰۱, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0