آشنایی با جلوه های ویژه ی css3

خاصیت transform  

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

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

قاعده کلی :

1 Transform: rotate(numberdeg)
2 Transform: skew(numberdeg)
3 Transform: scale(number)

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

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

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

:Scale برای بزرگنمایی عناصر استفاده می شود.

در ادامه برای آشنایی بیشتر با هر یک از مقادیر، نمونه ای آورده می شود:

مقدار rotate

مثال :

1 <img src="images/7learn.png" width="400" height="153" />

کد css  :

1 img {
2     -webkit-transform: rotate(50deg);
3     -moz-transform: rotate(50deg);
4     -o-transform: rotate(50deg);
5     transform: rotate(50deg);
6 }

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

transform rotate <a  style=آموزش CSS (فصل یازدهم – جلسه اول) : آشنایی با جلوه های ویژه ی CSS3" title="transform-rotate" width="394" height="424" />

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

مقدار Rotate، اعداد منفی را نیز مورد پشتیبانی قرار می دهد.

 

مقدار skew  

مثال :

1 <img src="images/7learn.png" width="400" height="153" />

کد css  :

1 img {
2     -webkit-transform: skew(50deg);
3     -moz-transform: skew(50deg);
4     -o-transform: skew(50deg);
5     transform: skew(50deg);
6 }

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

transform skew1 <a  style=آموزش CSS (فصل یازدهم – جلسه اول) : آشنایی با جلوه های ویژه ی CSS3" title="transform-skew" width="598" height="171" />

مقدار skew، نیز مانند مقدار قبلی اعداد منفی را نیز مورد پشتیبانی قرار می دهد.

مقدار  scale

مثال :

1 <img src="images/7learn.png" width="400" height="153" />

کد css  :

1 img {
2     -webkit-transform: scale(1.5);
3     -moz-transform: scale(1.5);
4     -o-transform: scale(1.5);
5     transform: scale(1.5);
6 }

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

این مقدار نیز مانند سایر مقادیر، اعداد منفی را مورد پشتیبانی قرار می دهد. البته با این تفاوت که عنصر ما 360 درجه نیز تغییر زاویه خواهد داد.

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

ارسال نظر