illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

21504 ۲۸ تیر ۹۱

امروز قصد داریم یک بخشی از آموزش 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