تبدیل های دو بعدی (2D Transforms)
اینجا با «تبدیل دو بعدی (2D Transform)» کار می کنیم. تبدیل یعنی چرخاندن، بزرگ کردن، جابه جا کردن، یا کج کردن عنصر. ویژگی transform این کارها را انجام می دهد. مثل چرخاندن یک کارت در بازی.
تابع translate()؛ جابه جایی روی محور
translate() عنصر را روی محور X و Y جابه جا می کند. مثل بردن آیکن در موبایل.
div {\n transform: translate(50px, 100px);\n}\nتابع rotate()؛ چرخش با درجه
rotate() عنصر را ساعت گرد یا پادساعت گرد می چرخاند. واحدش درجه است.
div {\n transform: rotate(20deg);\n}\nنکته: مقدار منفی، چرخش پادساعت گرد می دهد.
div {\n transform: rotate(-20deg);\n}\nتابع scale()؛ کوچک نمایی و بزرگ نمایی
scale() اندازه را در عرض و ارتفاع تغییر می دهد. مثل زوم روی عکس.
div {\n transform: scale(2, 3);\n}\ndiv {\n transform: scale(0.5, 0.5);\n}\nتابع های scaleX() و scaleY()
scaleX() فقط عرض را تغییر می دهد. scaleY() فقط ارتفاع را تغییر می دهد.
div {\n transform: scaleX(2);\n}\ndiv {\n transform: scaleX(0.5);\n}\ndiv {\n transform: scaleY(3);\n}\ndiv {\n transform: scaleY(0.5);\n}\nتابع های skewX() ،skewY() و skew()
skew() عنصر را کج می کند. مثل کاغذی که مورب می شود.
div {\n transform: skewX(20deg);\n}\ndiv {\n transform: skewY(20deg);\n}\ndiv {\n transform: skew(20deg, 10deg);\n}\ndiv {\n transform: skew(20deg);\n}\nتابع matrix()؛ حرفه ای اما فشرده
matrix() همه تبدیل های 2D را ترکیب می کند. ترتیبش شش پارامتر است.
div {\n transform: matrix(1, -0.3, 0, 1, 0, 0);\n}\nمراحل تمرین سریع
- یک div بساز و کلاس بده.
- transform دلخواه را روی کلاس بگذار.
- مقادیر را کم و زیاد کن و نتیجه ببین.
برای مطالعه بیشتر افکت های متن را ببین. همچنین فونت های سفارشی را بررسی کن. برای راهنمای کامل، این صفحه تبدیل های دو بعدی CSS را نشانه گذاری کن.
جمع بندی سریع
- translate جابه جا می کند.
- rotate می چرخاند.
- scale بزرگ و کوچک می کند.
- skew کج می کند.
- matrix همه را یکجا می دهد.