Cách xoay ảnh trong css

Question

Psssst. TRẠI BOOTC PHÁT TRIỂN WEB 2023 sẽ bắt đầu chỉ sau vài ngày nữa. Tham gia danh sách chờ, giữ chỗ trong khóa học thuần tập kéo dài 10 tuần của tôi và tìm hiểu các nguyên tắc cơ bản, HTML, CSS, JS, Tailwind, React, Next. jsvà hơn thế nữa. ✨

Nội dung chính Show

Xoay hình ảnh bằng CSS
Ví dụ về hình ảnh được xoay
Làm cách nào để sử dụng xoay trong CSS?
Làm cách nào để xoay hình ảnh trong HTML?

Trong khi xây dựng trang đích Cẩm nang React, tôi phải tìm kiếm cách xoay hình ảnh. Tôi muốn xoay hình ảnh SVG, nhưng điều này hoạt động với mọi loại hình ảnh. Hoặc bất kỳ phần tử HTML nào, trên thực tế

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 lớp

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

0 vào một phần tử, thay vì nhắm mục tiêu trực tiếp vào phần tử đó

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

điều chỉnh

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

1 để làm chậm hoặc tăng tốc thời gian 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 yếu tố của bạn bây giờ sẽ xoay

Xem hướng dẫn Hoạt hình CSS và Chuyển tiếp CSS

Đây là kết quả hiển thị trong Codepen

Xem Bút Cách sử dụng CSS Animations để xoay liên tục một hình ảnh của Flavio Copes (@flaviocopes) trên CodePen

Rotating an image on a web page is possible using a CSS rotate class, which is added to any

Xoay hình ảnh bằng CSS

Mã CSS cần bao gồm mã chuyển đổi cho từng trình duyệt Internet chính để hình ảnh được xoay trong tất cả các trình duyệt

Dưới đây là một ví dụ về mã CSS để xoay hình ảnh 180 độ

.rotateimg180 {
  -webkit-transform:rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

The CSS code above should be added to a .css stylesheet file linked in your HTML. For example, if your CSS file is named site.css and in the same directory as your HTML file, you can include the following HTML in the element:

Ngoài ra, bạn có thể bao gồm mã CSS nội tuyến, trong thẻ kiểu xuất hiện trước thẻ hình ảnh hoặc trong thuộc tính kiểu của thẻ hình ảnh

Once the CSS code is applied to your .css file, stylesheet, or