چطور با css ، یک المان را 360 درجه (دور خودش) بچرخانیم؟
- نفیسه افقی 5 ماه قبل سوال کرد
- شما باید برای ارسال دیدگاه وارد شوید
کافی است به المانی که می خواهید انیمیشن را روی آن اجرا کنید یک نام کلاس بدهید (مثلا: ninja)
حالا از کد زیر برای چرخش آن استفاده کنید:
.ninja{animation: myAnim 5s
linear 0s infinite
}
.ninja{transform-origin: center;
display: inline-block;
}
@keyframes myAnim {
100% {
transform: rotate(360deg) translateX(10px) rotate(-360deg);
}
0% {
transform: rotate(0deg) translateX(10px) rotate(0deg);
}
}
این کد برای چرخش در جهت عقربه های ساعت است، اگر خواستید خلاف عقربه های ساعت بچرخد، از کد زیر استفاده کنید:
.ninja2{animation: myAnim2 5s
linear 0s infinite
}
.ninja2{transform-origin: center;
display: inline-block;
}
@keyframes myAnim2 {
0% {
transform: rotate(0deg) translateX(10px) rotate(0deg);
}
100% {
transform: rotate(-360deg) translateX(10px) rotate(360deg);
}
}
- نفیسه افقی 5 ماه قبل پاسخ داد
- آخرین ویرایش 5 ماه قبل
- شما باید برای ارسال دیدگاه وارد شوید