تبدیلات دو‌بعدی در CSS

توضیح مفصل درباره تبدیلات دو‌بعدی در CSS

تبدیلات دو‌بعدی در CSS یک ویژگی جالب است که به شما اجازه می‌دهد عناصری را که با CSS طراحی کرده‌اید به شکلی متفاوت نمایش دهید. با استفاده از این ویژگی، می‌توانید عناصرتان را بچرخانید، اندازه‌شان را تغییر دهید یا آنها را در مختصات x و y منتقل کنید. این کار می‌تواند طراحی صفحات وب شما را جذاب‌تر و دینامیک‌تر کند.

یکی از پرکاربردترین تبدیلات دو‌بعدی، تابع rotate() است که اجازه می‌دهد یک عنصر را با زوایه‌ای مشخص حول مرکز خود بچرخانید. تابع دیگری که می‌توانید استفاده کنید scale() می‌باشد که برای بزرگ یا کوچک کردن عناصر به کار می‌رود. به عنوان مثال، می‌توانید اندازه یک دکمه را بزرگ کنید تا زمانی که ماوس روی آن حرکت می‌کند.

برای جابه‌جایی یک عنصر در صفحه، می‌توانید از translate() استفاده کنید که مختصات x و y را برای تغییر مکان در بر می‌گیرد. با این ویژگی می‌توانید پنل‌ها یا کاردهای اطلاعاتی را در صفحه منتقل کنید و تجربه کاربری منحصربه‌فردی ایجاد کنید.

در نهایت، برای به دست آوردن تلفیقی از این تبدیلات، CSS قابلیت matrix() را ارائه می‌دهد که ترکیبی از ترجمه، چرخش و مقیاس‌بندی را در یک ویژگی فراهم می‌کند. هرچند این روش پیچیده‌تر است ولی برای موقعیتی که نیاز به همزمان کردن چندین transformation دارید، مناسب است.

.transform-example {
  transform: rotate(45deg) scale(1.5) translate(100px, 200px);
}

توضیحات خط به خط کد

.transform-example یک کلاس CSS است که به نام "مثال تبدیل" تعریف شده است. این کلاس برای اعمال تبدیلات دو‌بعدی استفاده می‌شود.

transform: rotate(45deg) این بخش از کد مسئول چرخاندن عنصر به اندازه ۴۵ درجه در جهت عقربه‌های ساعت است.

scale(1.5) اندازه عنصر را به ۱٫۵ برابر اندازه اصلی آن تبدیل می‌کند، که باعث بزرگ‌تر شدن آن می‌شود.

translate(100px, 200px) مکان عنصر را ۱۰۰ پیکسل به راست و ۲۰۰ پیکسل به پایین منتقل می‌کند.