خانه / مقالات اموزشی / css / transform در css
آموزش CSS
آموزش CSS

transform در css

آموزش CSS (فصل یازدهم – جلسه اول) : آشنایی با جلوه های ویژه ی CSS3

خاصیت transform

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

قاعده کلی :

 

مقدار پیشفرض : none

Rotate  : برای چرخش اجزا به کار می رود.

Skew : برای کجی و انحراف عناصر به کار می رود

Scale : برای بزرگنمایی عناصر به کار می رود

در ادامه برای آشنایی با هر یک از مقادیر یک مثال میزنیم :

مقدار rotate

مثال :

کد css  :
 

نتیجه در مرورگر :

1x1.trans آموزش CSS (فصل یازدهم – جلسه اول) : آشنایی با جلوه های ویژه ی CSS3

دقت کنید که حتما از پیشوندهای مرورگرها استفاده کنید تا در اجرای کد مشکلی پیش نیاید.

این مقدار از اعداد منفی نیز پشتیبانی می کند.

مقدار skew

مثال :

کد css  :
 

نتیجه در مرورگر :

1x1.trans آموزش CSS (فصل یازدهم – جلسه اول) : آشنایی با جلوه های ویژه ی CSS3

این مقدار از اعداد منفی نیز پشتیبانی می کند.

مقدار  scale

مثال :

کد css  :
 

عدد ۱٫۵  به این معناس که عنصر عرض و ارتفاع عنصر ۱٫۵   برابر افزایش یابد. (بزرگنمایی)

این مقدار از اعداد منفی نیز پشتیبانی می کند.  با این تفاوت که عنصر ما ۳۶۰ درجه نیز تغییر زاویه خواهد داد.

بسیار خب،در جلسه دوم این فصل با خاصیت های transition و keyframe و طریقه ساخت یک انیمیشن آشنا خواهیم شد.

منبع : ۷learn

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

همچنین ببینید

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

پاسخ دهید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net