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

css3 attributes

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

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

  • grad : این واحد همون گرادیان هست و هر دور کامل دایره برابر با ۴۰۰ گرادیان هست. پس اگر بخایم حالت transform بالا رو با استفاده از واحد گرادیان بنویسیم بصورت transform: rotate(200grad) خواهد شد.
  • rad : این واحد هم رادیان هست. میدونید که عدد رادیان بصورت عدد پی نمایش داده میشه و عدد پی هم تقریبا ۳.۱۴ هست. تقریبا هر ۵۷ درجه رو یک رادیان میگن. پس اگر بخایم ۱۸۰ درجه رو بصورت رادیان در بیاریم، تقریبا ۳.۱۴rad خواهد شد. پس انتقال در این حالت بصورت transform: rotate(3.14rad) میشه.
  • turn : مهمترین مبحث این مطلب، همین واحد turn هست که در اینجا اون رو بصورت کامل آموزش میدیم. مثلا وقتی میگیم ۱turn منظورمون اینه که اون المنت باید یک دور کامل، دور خودش بچرخه. پس به عبارتی هر turn برابر با ۳۶۰ درجه هست. پس اگر بخایم انتقال بالا رو شبیه سازی کنیم، بصورت transform: rotate(0.5turn) خواهد شد.

همونطور که دیدید در بالا ۰.۵turn قرار دادیم و منظورمون اینه که میخایم نیم دور یا همون ۱۸۰ درجه، المنت مورد نظر رو بچرخونیم. پس مثلا اگر در جای دیگه بخایم یک المنت رو ۴ بار دور خودش بچرخونیم، دیگه لازم نیست بریم و درجه اون رو حساب کنیم و قرار بدیم. تنها کاری که لازمه انجام بدین، اینه که مقدار ۴turn رو قرار بدین. این مقدار، المنت مورد نظر رو ۴ بار کامل میچرخونه. در این رابطه یک مثال رو قرار میدم و توضیحاتی رو خدمتتون عرض میکنم.

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


    
        
            
            
        
    
    

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

svg {
    animation: spin 8s linear;
}

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

@keyframes spin {
    ۰% {
        transform: rotate(0turn);
    }
    ۱۰۰% {
        transform: rotate(4turn);
    }
}

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

۱ ۲ ۳ ۴

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

.count {
    font-size: 120px;
    line-height: 1em;
    font-weight: bold;
    height: 120px;
    width: 120px;
    text-align: center;
}

@keyframes flash {
    ۰% {
        opacity: 0;
    }
    ۲۵% {
        opacity: 1;
    }
    ۷۵% {
        opacity: 1;
    }
    ۱۰۰% {
        opacity: 0;
    }
}

.one,
.two,
.three,
.four {
    animation-name: flash;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
    position: absolute;
}

.delay-1 {
    animation-delay: 1s;
}

.delay-2 {
    animation-delay: 3s;
}

.delay-3 {
    animation-delay: 5s;
}

.delay-4 {
    animation-delay: 7s;
}

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

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

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

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0