bundles
  آیا می دانید تا کنون 7739 نفر در 16 دوره آموزشی سون لرن ثبت نام کرده اند !

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

22463 ۲۸ تیر ۹۱

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

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

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

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

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

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

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

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

دستور ratate :

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

دستور transition :

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

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 49 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    Avazekhoda(۲۹ دی ۱۳۹۱)

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

  • ‏‏

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

  • ‏‏
    محمدرضا عابدینی(۲۰ تیر ۱۳۹۲)

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

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

    • ‏‏
      لقمان آوند(۲۰ تیر ۱۳۹۲)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram