search

JavaScript xoay hình ảnh w3schools

Ngày đăng: 01/02/2023
Trả lời: 0
Lượt xem: 125

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

Show

Ví dụ: giả sử bạn có thẻ sau trong dự án của mình


<html>
  <head>
    <meta charset="utf-8" />
    <title>JavaScript rotate imagestitle>
  head>
  <body>
    <img id="img" src="https://via.placeholder.com/350x150.png" />
  body>
html>

Để 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

<body>
  <img
    id="img"
    src="https://via.placeholder.com/350x150.png"
    style="transform: rotate(90deg);"
  />
body>

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)";
5

document.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

<body>
  <img id="img" src="https://via.placeholder.com/350x150.png" />
  <button onClick="rotateImg()">Rotate Imagebutton>
  <script>
    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)`;
    }
  script>
body>

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 độ

Chúng tôi có thể xoay hình ảnh trong JavaScript không?

Để xoay hình ảnh bằng mã JavaScript, tất cả những gì bạn phải làm là thay đổi kiểu. thuộc tính chuyển đổi của mỗi hình ảnh . Ví dụ: đoạn mã JavaScript sau đây tạo ra một hình ảnh được xoay quanh điểm trung tâm.

Làm cách nào để xoay 90 độ trong JavaScript?

Có thể xoay một phần tử 90 độ bằng cách sử dụng thuộc tính biến đổi . Thuộc tính này được sử dụng để di chuyển, xoay, chia tỷ lệ và các thuộc tính khác để thực hiện các loại chuyển đổi thành phần tử. Hàm chuyển đổi rotate() có thể được sử dụng làm giá trị để xoay phần tử.

Làm cách nào để xoay hình ảnh trong HTML?

Lớp sau trong thẻ kiểu CSS chứa các thuộc tính khác nhau giúp xoay hình ảnh. .
<Đầu>
Xoay một hình ảnh
.
xoay90 {
-webkit-biến đổi. xoay (90 độ);
-moz-biến đổi. xoay (90 độ);

Làm cách nào để xoay hình ảnh bằng CSS?

Rotating an image using CSS Once the CSS code is applied to your . css file, stylesheet, or