Với một chút mã hóa, bạn có thể sử dụng JavaScript để xoay hình ảnh. Đây là một cách tuyệt vời để thêm một số tương tác vào trang web của bạn mà không cần phải sử dụng plugin nặng. Bạn cũng có thể sử dụng CSS để xoay hình ảnh, nhưng JavaScript cung cấp cho bạn nhiều quyền kiểm soát hơn đối với hình ảnh động

Với một chút mã, bạn có thể xoay hình ảnh trên các nút bấm bằng JavaScript. Đó là một quy trình khá đơn giản chỉ cần một vài dòng mã

Biết cách xoay hình ảnh theo chiều kim đồng hồ và ngược chiều kim đồng hồ là điều cần thiết cho bất kỳ ai muốn tạo ra các thiết kế đẹp hoặc thiết thực

Để xoay hình ảnh bằng CSS, thuộc tính rotate phải được sử dụng. Thuộc tính này là một phần của thuộc tính biến đổi. Nó nhận một giá trị, đó là một góc tính bằng độ

Trong bài viết này, tôi sẽ chỉ cho bạn cách bạn có thể xoay hình ảnh theo chiều kim đồng hồ và ngược chiều kim đồng hồ trên nút javascript

Mục tiêu học tập

• 1. Xoay thuộc tính css hình ảnh
• 2. Lấy phần tử hình ảnh bằng JavaScript
• 3. Sự kiện nhấp chuột JavaScript để thay đổi css
• 4. Xoay hình ảnh theo chiều kim đồng hồ title JavaScript
• 5. Xoay hình ảnh ngược chiều kim đồng hồ title JavaScript
• 6. Tóm lược

Xoay thuộc tính css hình ảnh

Có nhiều cách để xoay hình ảnh trên trang web bằng CSS. Một cách là sử dụng thuộc tính biến đổi CSS. Thuộc tính này cho phép bạn xoay, chia tỷ lệ, nghiêng hoặc dịch một phần tử. Để xoay hình ảnh, bạn có thể sử dụng thuộc tính biến đổi với giá trị "xoay"

Số độ mà bạn muốn xoay hình ảnh có thể được đặt thành số dương hoặc số âm. Bạn cũng có thể đặt xoay quanh một điểm nhất định, chẳng hạn như trung tâm của hình ảnh, bằng cách sử dụng thuộc tính biến đổi nguồn gốc

Một cách khác để xoay hình ảnh trên trang web là sử dụng hoạt ảnh CSS. Để thực hiện việc này, trước tiên bạn cần tạo quy tắc @keyframes có tên mà bạn sẽ sử dụng sau này

Trong quy tắc này, bạn sẽ chỉ định lượng vòng quay sẽ xảy ra tại các thời điểm cụ thể

Hình ảnh có thể được xoay theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ

Ví dụ: để xoay hình ảnh theo chiều kim đồng hồ 90 độ theo chiều kim đồng hồ, mã sẽ như sau

img {

  transform: rotate[90deg];

}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nếu bạn muốn xoay hình ảnh ngược chiều kim đồng hồ 90 độ, bạn sẽ sử dụng

img {

  transform: rotate[-90deg];

}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Lấy phần tử hình ảnh bằng JavaScript

Thẻ hình ảnh có hai thuộc tính là src và alt. Thuộc tính src chỉ định URL của hình ảnh sẽ được hiển thị. Thuộc tính alt cung cấp văn bản thay thế cho hình ảnh, nếu hình ảnh không thể hiển thị

Để lấy phần tử hình ảnh bằng JavaScript, người ta có thể sử dụng phương thức getElementById. Phương thức này trả về phần tử có thuộc tính id được chỉ định

Ví dụ: nếu muốn lấy phần tử hình ảnh có id là "myImage", họ sẽ sử dụng đoạn mã sau

   
    
How to rotate image clockwise anticlockwise  title button javascript?
    

    
          var myImage = document.getElementById["myImage"];
          console.log[myImage]
    
   

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Khi bạn đã có được tham chiếu đến thành phần hình ảnh, bạn có thể truy cập các thuộc tính và phương thức của nó

Kết quả

Sự kiện nhấp chuột JavaScript để thay đổi css

Để gắn một chức năng vào phần tử phần tử nút, trước tiên bạn cần tạo chức năng. Hàm có thể là bất cứ thứ gì bạn muốn, nhưng nó phải được xác định trước khi nó có thể được gắn vào một phần tử

Để gắn hàm vào một phần tử, bạn sử dụng thuộc tính title

Ví dụ

title="onButtonClick[]"

Điều này sẽ khiến hàm onButtonClick[] được thực thi khi phần tử được nhấp vào. Bạn cũng có thể xác định các hàm JavaScript nội tuyến bằng thuộc tính title

Xoay hình ảnh theo chiều kim đồng hồ title JavaScript

Khi bạn nhấp vào một hình ảnh, đôi khi bạn muốn nó xoay. Xoay hình ảnh trên trang web có thể được thực hiện bằng JavaScript. Đây là cách để làm điều đó

Trước tiên, bạn cần có một phần tử hình ảnh trên trang HTML của mình như chúng tôi đã làm ở trên. Sau đó, bạn sẽ cần thiết lập chức năng xoay hình ảnh khi nhấp vào như ở bước trước

Trong chức năng này, bạn sẽ sử dụng thuộc tính biến đổi CSS để xoay hình ảnh theo một số độ nhất định,

Để làm được điều đó, trước tiên chúng ta cần truy cập thuộc tính biến đổi để bạn có thể cung cấp cho nó một số giá trị theo góc bạn cần theo yêu cầu của bạn, vì vậy trước tiên tôi sẽ xoay nó theo chiều kim đồng hồ

 
Rotate image clockwise


  function rotateImageClockWise[] {
    var myImage = document.getElementById["myImage"];
    myImage.style.transform = 'rotate[90deg]';
  }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Xoay hình ảnh theo chiều kim đồng hồ ví dụ

Xoay hình ảnh ngược chiều kim đồng hồ title JavaScript

Trong trường hợp này, không có yêu cầu cụ thể nào, Bạn chỉ cần thay đổi giá trị biến đổi thành dấu trừ [-] để có thể xoay ngược chiều kim đồng hồ giống như ví dụ dưới đây

 
Rotate image Anticlockwise


  function rotateImageAntiClockWise[] {
    var myImage = document.getElementById["myImage"];
    myImage.style.transform = 'rotate[-90deg]';
  }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Xoay hình ảnh ngược chiều kim đồng hồ ví dụ

Tóm lược

Bài viết này đã chỉ cho bạn cách xoay hình ảnh theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ title bằng cách sử dụng nút javascript

Đầu tiên, chức năng được xác định.
Thứ hai, trình xử lý sự kiện đã được thêm vào nút.
Cuối cùng, chức năng được gọi khi nút được nhấp. Điều này có thể hữu ích để tạo trò chơi hoặc ứng dụng tương tác.

Bằng cách làm theo các bước được nêu trong bài viết này, bạn có thể dễ dàng thêm chức năng này vào các ứng dụng web của riêng mình

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

Làm cách nào để xoay hình ảnh khi nhấp vào nút bằng JavaScript?

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