مردان وردپرس آموزش Front-End آموزش چرخش یک شی با CSS3

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

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

 

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

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

 

 

 

 

 

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

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

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

Advertising MiSaCo.

نظرات خود را اینجا بنویسید

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

Time limit is exhausted. Please reload CAPTCHA.