Cách xoay liên tục hình ảnh bằng CSS

Trong khi xây dựngSổ tay Reacttrang đích, tôi đã phải tìm kiếm cách xoay hình ảnh. Tôi muốn xoay mộtSVGhình ảnh, nhưng điều này hoạt động cho bất kỳ loại hình ảnh nào. Hoặc bất kỳ phần tử HTML nào, thực sự.

Thêm hướng dẫn CSS này vào phần tử bạn muốn xoay:

animation: rotation 2s infinite linear;

Bạn cũng có thể chọn thêm mộtrotatelớp cho một phần tử, thay vì nhắm mục tiêu nó trực tiếp:

.rotate {
  animation: rotation 2s infinite linear;
}

điều chỉnh2sđể làm chậm hoặc tăng tốc độ chu kỳ quay.

Sau đó, thêm dòng này, bên ngoài bất kỳ bộ chọn nào:

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

Đó là nó! Các phần tử của bạn bây giờ sẽ xoay vòng.

Kiểm traHoạt ảnh CSSvàChuyển đổi CSShướng dẫn

Đây là kết quả được hiển thị trong Codepen:

Xem bútCách sử dụng CSS Animations để liên tục xoay hình ảnhbởi Flavio Copes (@flaviocopes) trênCodePen.