step1

با عرض سلام من صادق مهدی لو هستم و در این آموزش قصد دارم نحوه چرخش یک شی رو با استفاده از CSS3  بهتون آموزش بدم،‌ با مردان وردپرس همراه باشید.

یکی از امکانات جدیدی که به CSS3 اضافه شده این هست که شما میتونید یک شی رو با هر زاویه ای که دلتون می خواد بچرخونید به نمونه زیر دقت کنید:

<style>
   .demo511 { display: block;width: 10px;height: 200px;border: 1px solid;padding: 0px;font-size: 26px;font-family: Arial;background: #CCC;margin: 80px auto;
    -webkit-animation-name: rotation; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s ; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    animation-name: rotation;
    animation-duration: 4s ;
    animation-iteration-count: infinite;
  }
@-webkit-keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

  </style>
<div class='demo511'></div>
 

در این مثال ما اومدیم یک انیمیشن با نام rotation تعریف کردیم که در یک بازه ۴ ثانیه ۳۶۰ درجه می چرخه و حالت اون رو هم حالت تکرار گذاشتیم که وقتی به انتها میرسه دوباره تکرار میشه.

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

<style>
   .demo518 { display: block;width: 10px;height: 200px;border: 1px solid;padding: 0px;font-size: 26px;font-family: Arial;background: #CCC;margin: 80px auto;
    -webkit-animation-name: rotation; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 60s ; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    animation-name: rotation;
    animation-duration: 60s ;
    animation-iteration-count: infinite;
    transform-origin:100% 100%;
   -webkit-transform-origin:100% 100%;
   -ms-transform-origin:100% 100%;
  }
@-webkit-keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

  </style>
<div class='demo518'></div>
 

 

 

 

 

همونطور که در کد بالا دیدید با اضافه کردن خاصیت transform-origin و مقدار دادن به اون تونستیم تعیین کنیم که چرخش از کدوم ناحیه صورت بگیره.

منبع :‌ مردان وردپرس

تاریخ آخرین بروزرسانی : ۷ بهمن ۱۳۹۴
صادق مهدی لو

زمانی که تنها دوازده سال داشتم ، پدرم برای کادوی تولدم کامپیوتری را خرید. او هرگز نمی دانست که این وسیله زندگی من را تغییر خواهد داد ، و اکنون من یک برنامه نویس هستم...

ارسال نظر

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.