چرخش تصاویر در CSS3

- visibility ۴٩ mode_comment

امروز قصد داریم یک بخشی از آموزش CSS3 رو برای شما قرار بدهیم ، در این مطلب یاد خواهید گرفت که یک متن ، تصویر و... ای را به چرخش در آورید ...

در ابتدا باید متن یا تصویری که می خواهید به چرخش در بیاید را انتخاب نمائید ، ما در این قسمت 4 عکس  را مورد انتخاب قرار داده ایم :

فایرفاکسکروماینترنت اکسپلوررخبرخوان

حال وقت کد نویسی است :

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

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

  • moz-transform : این دستور برای اجرا شدن در مرورگر فایرفاکس می باشد.
  • ms-transform : این دستور برای اجرا شدن در مرورگر اینترنت اکسپلورر می باشد.
  • webkit-transform : این دستور برای اجرا شدن در مرورگرهای webkit همانند سافاری می باشد.
  • o-transform : این دستور نیز برای اجرا شدن در مرورگر opera می باشد.

info نکته :

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

دستور ratate :

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

دستور transition :

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

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

برای مشاهده خروجی کلیک نمائید

اگر براتون جالب بود ، نظرات خودتون رو بیان کنید...

comment دیدگاه کاربران
Avazekhoda

بخدا لقمان استادی بخدا قسم مادر مثل تو نزائیده

ahmad

درود بر شما 😳 😳 😳

محمدرضا عابديني

سلام و وقت بخیر خدمت شما اساتید گرام.

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

لقمان آوند

ممنون جناب عابدینی
لطف دارید شما
تیم سون لرن همواره قدردارن الطاف شما و بازدیدکنندگان عزیز بوده …

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2 3