CSS অ্যানিমেশন রোটেট এবং ট্রানসলেট কাম্বাইন করে এলিমেন্টকে বিভিন্নভাবে ট্রান্সফর্ম করতে সাহায্য করে।
নিচের উদাহরণটি দেখাবে কিভাবে আমরা একটি এলিমেন্টকে সার্কুলার পাথে সরাতে পারি।
উদাহরণ
<!DOCTYPE html> <html> <head> <style> div { margin: 8%; width: 35px; height: 35px; border-radius: 5px; background: red; animation: move 3s infinite linear; } @keyframes move { 0% { transform: rotate(0deg) translateX(40px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(40px) rotate(-360deg); } } </style> </head> <body> <div></div> </body> </html>
আউটপুট
এটি নিচের ফলাফল দেবে −
