معرفی و آموزش خاصیت transform در css

سلام. امروز با معرفی و آموزش خاصیت transform در css در خدمتتونیم.

یکی از ویژگی هایی که توی طراحی سایت ها خیلی کاربرد داره خاصیت transform هستش که میتونید کلی جلوه به عناصر بدید. برای آشنایی با این ویژگی با آریاگراف باشید.
با استفاده از این خاصیت شما میتوانید جلوه های ویژه ای به عناصر وب سایت خودتون بدید. این ویژگی چهار مقدار مختلف داره که هر کدوم یه افکت خاص رو ایجاد میکنه

برای دیدن دمو کد ها عجله نکنید! در آخر آموزش یک دموی جامع براتون فراهم کردیم.

چرخش (Rotate)

Transform: rotate(numberdeg)

خب این کد باعث چرخش عناصر میشه.

-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);

کد های بالا باعث بهبود نمایش در مرورگر های مختلف میشه که عموما لازمه.

مثلا ما توی کد بالا خاصیتی تعریف کردیم که عنصرمون ۲۰ درجه بچرخه.

مثل چرخیدن لوگو های دایره ای شکل.

 

حرکت افقی ، عمودی (Translate)

این کد هم که کد آخریمون هست باعث حرکت یک عنصر در محور های X-Y میشود. (همون افقی عمودی خودمون 🙂 )

-webkit-transform: translate(50px,20px);
-moz-transform: translate(50px,20px);
-o-transform: translate(50px,20px);
transform: translate(50px,20px);

ما عنصرمون رو ۵۰ پیکسل به سمت افق حرکت دادیم و ۲۰ پیکسل عمودی.

 

تغییر اندازه (Scale)

این کد باعث بزرگنمایی عناصر میشه.

-webkit-transform: scale(2.0);
-moz-transform: scale(2.0);
-o-transform: scale(2.0);
transform: scale(2.0);

ما در کد بالا عنصرمون رو ۲ برابر بزرگ کردیم.

 

کج شدن (Skew)

این کد باعث کج شدن عناصر به مقدار دلخواه میشه

-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
 transform: skew(20deg);

ما در کد بالا عنصرمون رو ۲۰ درجه کج کردیم.

 

مشاهده دمو همه این خاصیت ها (ماوس خود را روی عناصر ببرید)

 

حتما ببینید:   معرفی و آموزش transition در css

معرفی و آموزش خاصیت transform در css

اشتراک این مطلب در تلگرام.

نظر شما چیه؟

  1. راهی... گفته:

    آموزشات خیلی روانن خوب بود.

  2. Ali27 گفته:

    سلام .
    خیلی خیلی خوب بود !
    با تشکر از زحمات شما !