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

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



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

آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 3) : کار با angle یا زاویه

0 120 ۲۱ بهمن ۹۵

css3 attributes

کار با angle یا زاویه

angle یا زاویه، میتونه یک مقدار معتبر برای بعضی از ویژگی های CSS باشه. همونطور که میدونید ویژگی بنام transform وجود داره که یک تبدیل رو برای المنت مورد نظرتون به وجود میاره. مثلا با استفاده از translate میتونه اون رو جابجا کنه و یا با Scale اون رو کوچک و بزرگ کنه. همچنین با استفاده از rotate هم میتونه اون رو بچرخونه. مثلا کد transform: rotate(180deg) باعث میشه که المنت مورد نظر 180 درجه بچرخه. همونطور که دیدید از واحد deg که مخفف کلمه degree یا درجه هست، استفاده کردیم. واحد deg تنها واحدی نیست که در اینجور جاها میتونین از اون استفاده کنید و همچنین میتونین از واحدهایی مثل موارد زیر هم استفاده کنید:

  • grad : این واحد همون گرادیان هست و هر دور کامل دایره برابر با 400 گرادیان هست. پس اگر بخایم حالت transform بالا رو با استفاده از واحد گرادیان بنویسیم بصورت transform: rotate(200grad) خواهد شد.
  • rad : این واحد هم رادیان هست. میدونید که عدد رادیان بصورت عدد پی نمایش داده میشه و عدد پی هم تقریبا 3.14 هست. تقریبا هر 57 درجه رو یک رادیان میگن. پس اگر بخایم 180 درجه رو بصورت رادیان در بیاریم، تقریبا 3.14rad خواهد شد. پس انتقال در این حالت بصورت transform: rotate(3.14rad) میشه.
  • turn : مهمترین مبحث این مطلب، همین واحد turn هست که در اینجا اون رو بصورت کامل آموزش میدیم. مثلا وقتی میگیم 1turn منظورمون اینه که اون المنت باید یک دور کامل، دور خودش بچرخه. پس به عبارتی هر turn برابر با 360 درجه هست. پس اگر بخایم انتقال بالا رو شبیه سازی کنیم، بصورت transform: rotate(0.5turn) خواهد شد.

همونطور که دیدید در بالا 0.5turn قرار دادیم و منظورمون اینه که میخایم نیم دور یا همون 180 درجه، المنت مورد نظر رو بچرخونیم. پس مثلا اگر در جای دیگه بخایم یک المنت رو 4 بار دور خودش بچرخونیم، دیگه لازم نیست بریم و درجه اون رو حساب کنیم و قرار بدیم. تنها کاری که لازمه انجام بدین، اینه که مقدار 4turn رو قرار بدین. این مقدار، المنت مورد نظر رو 4 بار کامل میچرخونه. در این رابطه یک مثال رو قرار میدم و توضیحاتی رو خدمتتون عرض میکنم.

همونطور که دیدید یک المنت قرار گرفته و دور خودش میچرخه و یک عدد هم در کنار اون قرار داره که، تعداد دورها رو نمایش میده. میبینید که این المنت 4 دور کامل میچرخه و در نهایت می ایسته. خب حالا میخایم کدهای اون رو بررسی کنیم. همونطور که دیدید یک کد SVG قرار گرفته تا المنت مورد نظر رو برای ما بسازه:

بعد از اون درون CSS کد زیر رو برای svg اعمال کردیم:

میبینید که یک ویژگی animation براش قرار دادیم و مشخص کردیم که انیمیشن spin بصورت خطی در مدت زمان 8 ثانیه، برای این المنت اجرا بشه. انیمیشن spin هم با استفاده از keyframe بصورت زیر تعریف شده:

میبینید که دو حالت 0% و 100% رو مشخص کردیم و هر چیزی که ما بین این دو حالت هست نیز بصورت اتوماتیک شبیه سازی میشه. پس این keyframe کاری میکنه که المنت مورد نظر، 4turn یا 4 دور کامل، بچرخه. تا اینجا هدف اصلی آموزش که واحد turn بود به پایان رسیده ولی برای اینکه مثال رو کامل توضیح بدیم، مطلبو ادامه میدیم. همونطور که دیدید در کنار المنتی که میچرخه، اعدادی هم نمایش داده میشن. کدهای HTML بصورت زیر هست:

همونطور که دیدید اعداد رو درون span ها قرار دادیم و برای هر کدوم هم کلاس مربوط به خودش رو مشخص کردیم تا در CSS، استایل متفاوتی برای هر کدام اعمال کنیم. کدهای CSS بصورت زیر هست:

همونطور که دیدید یک keyframe بنام flash ساختیم و کار این مورد شبیه سازی حالت مخفی شدن و نمایش داده شدن اعداد هست. همچنین با استفاده از animation-delay، برای هر کدوم از اونا تاخیری قرار دادیم تا پشت سر هم اجرا بشن و همگی با هم اجرا نشن. ویژگی animation-fill-mode نقش مهمی رو ایفا میکنه که در جلسه بعد بصورت کامل در مورد اون بحث خواهیم کرد.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

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

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram