Khi cần xoay ảnh bằng JavaScript, bạn cần thêm kiểu CSS transform: rotate[x]
vào thành phần ảnh muốn xoay
Ví dụ: giả sử bạn có thẻ sau trong dự án của mình
JavaScript rotate images
Để xoay hình ảnh, bạn có thể chọn phần tử bằng cách sử dụng document.querySelector['#img']
rồi nối thuộc tính
document.querySelector["#img"].style.transform = "rotate[90deg]";
0 vào phần tử. Thuộc tính document.querySelector["#img"].style.transform = "rotate[90deg]";
1 chấp nhận tham số góc tròn được đo bằng 360 độĐoạn mã JavaScript sau sẽ xoay hình ảnh 90 độ
document.querySelector["#img"].style.transform = "rotate[90deg]";
Kiểu transform: rotate[x]
sẽ được thêm vào thẻ HTML của bạn như sau
Bạn muốn xoay bao nhiêu độ là tùy thuộc vào bạn. Để lật ngược hình ảnh, bạn có thể sử dụng thuộc tính
document.querySelector["#img"].style.transform = "rotate[90deg]";
5document.querySelector["#img"].style.transform = "rotate[360deg]";
Xoay hình ảnh bằng một nút bấm
Nếu bạn cần xoay hình ảnh khi nhấp vào nút, bạn có thể tạo một hàm JavaScript để xoay hình ảnh. Sau đó, bạn cần gán chức năng đó cho thuộc tính
document.querySelector["#img"].style.transform = "rotate[90deg]";
6 của nút________số 8_______
Bạn cũng có thể xoay thêm hình ảnh 90 độ mỗi lần nhấp vào nút bằng cách trước tiên tạo một biến giữ góc xoay
Hãy xem ví dụ sau
Rotate Image
let rotation = 0;
function rotateImg[] {
rotation += 90; // add 90 degrees, you can change this as you want
if [rotation === 360] {
// 360 means rotate back to 0
rotation = 0;
}
document.querySelector["#img"].style.transform = `rotate[${rotation}deg]`;
}
Cuối cùng, bạn có thể xoay hình ảnh ngược chiều kim đồng hồ bằng cách thêm số âm thay vì số dương. Đoạn mã sau cho biết cách bạn có thể xoay hình ảnh -45 độ