Cách di chuyển phần tử theo đường tròn với CSS

Giới thiệu

CSS animations có thể giúp chúng ta biến đổi phần tử theo nhiều cách bằng cách kết hợp rotate và translate.

Ví dụ

Ví dụ sau minh họa cách di chuyển phần tử theo đường tròn:

<!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>

Kết quả

Đoạn mã trên sẽ cho kết quả sau: