50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

آموزش CSS – ویژگی transform در CSS3 (دوبعدی)

  • آپدیت شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش CSS با سایه در CSS3 آشنا شدید. در این بخش قصد داریم به ویژگی transform در CSS3 یپردازیم.

ویژگی transform در CSS3 امکان تغییر شکل, مکان و یا وضعیت یک عنصر را می دهد.

در اینجا ما در مورد transform دوبعدی صحبت خواهیم کرد.

تغییر شکل دوبعدی

یک المان تغییر شکل یافته بر روی المان فرزند تاثیر گذار نیست ولی می تواند آن باعث روی هم افتادن آن شود, مثل آنکه المان ها موقعیت دهی absolute را گرفتند.

به هر حال, المان تغییر شکل داده شده هنوز هم می تواند فضای فعلی را در مکان پیش فرض خود در صفحه بگیرد.

توابع transform در CSS3

ویژگی transform در CSS3 از توابعی برای دستکاری سیستم مختصات استفاده شده توسط یک المان به منظور ایجاد افکت transformation بهره می برد.

تابع translate()

المان را از موقعیت فعلی به موقعیت جدید در جهت محورهای x,y حرکت می دهد.

که بصورت translate(tx, ty) نوشته می شود. اگر مقدار ty مشخص نشود, فرض مرورگر این است که مقدار آن ۰ قرار دادیم.

تابع translate(200px, 50px) تصویر را ۲۰۰ پیکسل بصورت افقی در محور x مثبت و ۵۰ پیکسل نیز در جهت عمود در محور y مثبت حرکت می دهد.

تابع rotate()

تابع rotate() , میزان درجه چرخش المان را مشخص می کند و گردش دور مبدایی که بوسیله ویژگی transform-origin تنظیم شده است, انجام خواهد شد.

زاویه مثبت برای این تابع باعث می شود تا چرخش در جهت عقربه های ساعت صورت گیرد و زاویه منفی باعث چرخش در جهت عکس عقربه های ساعت می شود.

مقادیر این تابع می توانند از نوع درجه (deg), چرخش (turn) یا رادیان (rad) باشند.

تابع scale()

تابع scale() اندازه المان را افزایش یا کاهش می دهد. که بصورت scale(sx, sy) نوشته می دهد.

اگر sy مشخص نشود, مقدار آن معادل sx فرض خواهد شد.

تابع scale(1.5) نسبتا مقیاس عرض و ارتفاع تصویر را ۱٫۵ برابر سایز اصلی می کند.

تابع scale(1) یا scale(1, 1) روی المان تاثیری ندارد.

از این تابع برای بزرگ کردن المان هایی مثل input های چک باکس یا radio و غیره که امکان تعیین اندازه آن ها با width یا height نیست بسیار استفاده می شود و کاربرد دارد.

تابع skew()

با تابع skew که برای ویژگی transform , می توانید یک عنصر را در فضای دو بعدی به صورت کج یا مورب تغییر شکل دهید.

این تابع بصورت skew(ax, ay) نوشته می شود که اگر ay را مشخص نکنید ۰ درنظر گرفته خواهد شد.

تابع skew(-40deg, 15deg) المان را -۴۰ درجه بصورت افقی در جهت محور x و ۱۵ درجه بصورت عمودی در جهت محور y حرکت می دهد.

تابع matrix()

با استفاده از تابع matrix که برای ویژگی transform , می توان کارهایی از قبیل تغییر شکل, مکان و وضعیت یک عنصر را بوسیله یک ماتریس در فضای دو بعدی انجام داد.

این ۶ پارامتر و تابع بالا در فرم ماتریکس و بصورت matrix(a, b, c, d, e, f) نوشته می شود.

بخش زیر به شما نحوه استفاده از توابع transform بصورت دو بعدی را در قالب matrix() نشان می دهد.

  • translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty); = مقدارهای tx, ty نشان دهنده تغییر موقعیت عمودی و افقی هستند.
  • rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0); – از آنجا که a همان درجه است. از sin(a) و –sin(a) می توانید برای برعکس کردن چرخش استفاده کنید. حداکثر چرخش ۳۶۰ درجه است.
  • scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0); – مقدارهای sx, sy مقیاس را بصورت افقی و عمودی نشان می دهد.
  • skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0); – ax, ay تعیین کننده مقدارهای افقی و عمودی بصورت درجه هستند.

اینجا یک مثال از انجام تغییر شکل دو بعدی با تابع matrix() است.

به هر حال, زمانی که بیشتر از یک transform را یکجا اعمال می کنید, خیلی راحت تر از آن است که توابع مربوطه را بصورت زیر و به ترتیب قرار بدید :

قطعا محاسبه چنین ماتریسی آسان نیست. خوشبختانه ابزاری برای محاسبه آن ساخته شده است که آدرس آن را در زیر مشاهده می کنید.

فقط کافی است توابع transform را در محیط مشخص شده نوشته و دکمه را بزنید: meyerweb.com/eric/tools/matrix

توابع transform دوبعدی

جدول زیر یک خلاصه کوتاه از تمام توابع دوبعدی transform را می دهد.

تابعتوضیحات
translate(tx,ty)المان را در جهت محورهای x و y حرکت می دهد
translateX(tx)المان را در جهت محور x حرکت می دهد
translateY(ty)المان را در جهت محور y حرکت می دهد
rotate(a)المان را در جهت زاویه مشخص شده چرخش می دهد و این گردش بر اساس مبدا مشخص شده توسط transform-origin انجام می شود.
scale(sx,sy)اندازه المان را افزایش یا کاهش می دهد. تابع scale(1,1) هیچ تاثیری روی المان ندارد
scaleX(sx)عرض المان را افزایش یا کاهش می دهد.
scaleY(sy)ارتفاع المان را افزایش یا کاهش می دهد.
skew(ax,ay)المان را در جهت محور x,y کج یا مورب می کند
skewX(ax)المان را در جهت محور x کج یا مورب می کند
skewY(ay)المان را در جهت محور y کج یا مورب می کند
matrix(n,n,n,n,n,n)تغییر شکل های دوبعدی را در ۶ مقدار دریافت و لحاظ می کند

 

امیدوارم در این بخش آموزش CSS, از ویژگی transform در CSS3 (دوبعدی) نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم
برچسب ها : , ,

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

    دوره های آموزشی

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link