رفتن به مطلب

آموزش ایجاد چرخش تصاویر در css


lion

پست های پیشنهاد شده

با سلام خدمت دوستان امیدوارم از این آموزش لدت کافی رو ببرید

 

در این قسمت یاد خواهید گرفت که یک متن ، تصویر و... ای را به چرخش در آورید ... . در ابتدا باید متن یا تصویری که می خواهید به چرخش در بیاید را انتخاب نمائید

در ابتدا در بخش STYLE خود یک کلاس با نام rotate ایجاد نمائید :

 

<style type="text/css">.rotate:hover{-moz-transform:rotate(360deg);-moz-transition:600ms ease-in;-ms-transform:rotate(360deg);-ms-transition:600ms ease-in;-webkit-transform:rotate(360deg);-webkit-transition:600ms ease-in;-o-transform:rotate(360deg);-o-transition:600ms ease-in;}</style>

 

 

<style type="text/css">.rotate:hover{-moz-transform:rotate(360deg);-moz-transition:600ms ease-in;-ms-transform:rotate(360deg);-ms-transition:600ms ease-in;-webkit-transform:rotate(360deg);-webkit-transition:600ms ease-in;-o-transform:rotate(360deg);-o-transition:600ms ease-in;}</style>

 

 

در کد فوق در ابتدا ما کلاس rotate را به صورت hover تعریف کرده ایم ، یعنی وقتی عملی رخ دهد که اشاره ماوس روی آن قرار گیرد ، در قسمت های بعدی لازم است چهار مقدار را در ابتدا توضیح دهیم :

 

moz-transform : این دستور برای اجرا شدن در مرورگر فایرفاکس می باشد.

ms-transform : این دستور برای اجرا شدن در مرورگر اینترنت اکسپلورر می باشد.

webkit-transform : این دستور برای اجرا شدن در مرورگرهای webkit همانند سافاری می باشد.

o-transform : این دستور نیز برای اجرا شدن در مرورگر opera می باشد.

 

نکته مهم : این دستورات در css3 به صورت قرار دادی برای انواع مرورگرها تعریف شده اند.

 

دستور ratate :

 

دستور rotate ، درجه چرخش را مشخص می کند ، همانطور که در کد بالا مشاهده می نمائید ، ما از 360deg( یعنی 360 درجه) استفاده نموده ایم.

 

دستور transition :

 

این دستور برای مشخص کردن سرعت چرخش می باشد که بر حسب میلی ثانیه می باشد ، ما در این قسمت آن را برابر با 600 قرار داده ایم ، همچنین مقدار ease in که یکی از پارامترهای دستور transition می باشد ، ease in باعث شروع چرخش به صورت آهسته می شود.

 

کد اجرا و فراخوانی کلاس :

 

<img width="55" height="55" border="0" src="آدرس شما"class="rotate" /><img width="55" height="55" border="0" src="آدرس شما"class="rotate" /><img width="55" height="55" border="0" src="آدرس شما"class="rotate" /><img width="55" height="55"  src="آدرس شما"class="rotate" />

 

 

<img width="55" height="55" border="0" src="آدرس شما"class="rotate" /><img width="55" height="55" border="0" src="آدرس شماg"class="rotate" /><img width="55" height="55" border="0" src="آدرس شما"class="rotate" /><img width="55" height="55"  src="آدرس شما"class="rotate" />

 

 

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

  • Like 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...