Bạn có thể xoay hình ảnh trong HTML không?

Có hai loại xoay, xoay 2D và 3D. Trong hướng dẫn này, bạn sẽ tìm hiểu về cả hai loại bằng một ví dụ thực hành đơn giản

Các phép quay 2D

Thuộc tính CSS,

transform: rotateX(angle); // Rotates along with X axis to a specified angle
transform: rotateY(angle); // Rotates along with Y axis to a specified angle
transform: rotateZ(angle); // Rotates along with Z axis to a specified angle

6 tạo các phép quay 2D với sự trợ giúp của hàm CSS,

transform: rotateX(angle); // Rotates along with X axis to a specified angle
transform: rotateY(angle); // Rotates along with Y axis to a specified angle
transform: rotateZ(angle); // Rotates along with Z axis to a specified angle

7

Trình duyệt xoay đối tượng theo một góc xác định trong mặt phẳng hai chiều. Một mặt phẳng hai chiều có hai chiều, chiều ngang (X) và chiều dọc (Y)

cú pháp

Cú pháp chung của thuộc tính CSS,

transform: rotateX(angle); // Rotates along with X axis to a specified angle
transform: rotateY(angle); // Rotates along with Y axis to a specified angle
transform: rotateZ(angle); // Rotates along with Z axis to a specified angle

6 để xoay hình ảnh bằng hàm CSS,

transform: rotateX(angle); // Rotates along with X axis to a specified angle
transform: rotateY(angle); // Rotates along with Y axis to a specified angle
transform: rotateZ(angle); // Rotates along with Z axis to a specified angle

9

transform: rotate(angle); 

Hàm CSS

transform: rotateX(angle); // Rotates along with X axis to a specified angle
transform: rotateY(angle); // Rotates along with Y axis to a specified angle
transform: rotateZ(angle); // Rotates along with Z axis to a specified angle

7 giúp chỉ định một phép biến đổi xoay hình ảnh. Chức năng này chấp nhận góc quay như một tham số bắt buộc

xoay 3D

Xoay 3D cũng xem xét kích thước độ sâu (Z) cùng với các kích thước khác. Do đó, bạn cũng cần chỉ định trục quay cùng với góc

Bạn có thể sử dụng các hàm,

transform: rotateX(angle); // Rotates along with X axis to a specified angle
transform: rotateY(angle); // Rotates along with Y axis to a specified angle
transform: rotateZ(angle); // Rotates along with Z axis to a specified angle

1,

transform: rotateX(angle); // Rotates along with X axis to a specified angle
transform: rotateY(angle); // Rotates along with Y axis to a specified angle
transform: rotateZ(angle); // Rotates along with Z axis to a specified angle

2 và

transform: rotateX(angle); // Rotates along with X axis to a specified angle
transform: rotateY(angle); // Rotates along with Y axis to a specified angle
transform: rotateZ(angle); // Rotates along with Z axis to a specified angle

3 để xoay 3D

Cú pháp và mô tả

Cú pháp của các hàm

transform: rotateX(angle); // Rotates along with X axis to a specified angle
transform: rotateY(angle); // Rotates along with Y axis to a specified angle
transform: rotateZ(angle); // Rotates along with Z axis to a specified angle

1,

transform: rotateX(angle); // Rotates along with X axis to a specified angle
transform: rotateY(angle); // Rotates along with Y axis to a specified angle
transform: rotateZ(angle); // Rotates along with Z axis to a specified angle

2 và

transform: rotateX(angle); // Rotates along with X axis to a specified angle
transform: rotateY(angle); // Rotates along with Y axis to a specified angle
transform: rotateZ(angle); // Rotates along with Z axis to a specified angle

3 như sau -

transform: rotateX(angle); // Rotates along with X axis to a specified angle
transform: rotateY(angle); // Rotates along with Y axis to a specified angle
transform: rotateZ(angle); // Rotates along with Z axis to a specified angle

Vài thông tin bổ sung cho xoay 3D

Hàm CSS,

transform: rotateX(angle); // Rotates along with X axis to a specified angle
transform: rotateY(angle); // Rotates along with Y axis to a specified angle
transform: rotateZ(angle); // Rotates along with Z axis to a specified angle

7 cho phép bạn chỉ định cả trục và góc cho phép xoay 3D trong một hàm duy nhất. Đây là cú pháp chung của hàm

tranform: rotate3d(X,Y,Z,angle); 

Các tham số cho chức năng này như sau

• transform: rotateX(angle); // Rotates along with X axis to a specified angle
  transform: rotateY(angle); // Rotates along with Y axis to a specified angle
  transform: rotateZ(angle); // Rotates along with Z axis to a specified angle
  
  

  8 - Giữ tọa độ của vectơ để xoay. Các tham số này có thể có giá trị trong khoảng từ 0 đến 1

• transform: rotateX(angle); // Rotates along with X axis to a specified angle
  transform: rotateY(angle); // Rotates along with Y axis to a specified angle
  transform: rotateZ(angle); // Rotates along with Z axis to a specified angle
  
  

  9 - Chỉ định góc quay

Một mẫu mã hóa

Đây là một mẫu mã hóa đơn giản và dễ làm theo để xoay hình ảnh. Bạn có thể viết hoặc sao chép mã nguồn HTML bên dưới vào tệp HTML của mình,

tranform: rotate3d(X,Y,Z,angle); 

0

transform: rotateX(angle); // Rotates along with X axis to a specified angle
transform: rotateY(angle); // Rotates along with Y axis to a specified angle
transform: rotateZ(angle); // Rotates along with Z axis to a specified angle

3

Tệp CSS của bạn,

tranform: rotate3d(X,Y,Z,angle); 

1 phải có mã nguồn bên dưới

transform: rotateX(angle); // Rotates along with X axis to a specified angle
transform: rotateY(angle); // Rotates along with Y axis to a specified angle
transform: rotateZ(angle); // Rotates along with Z axis to a specified angle

5

Ví dụ trên sử dụng một hình ảnh duy nhất để thực hiện cả ví dụ 2D và 3D. Nó đã sử dụng tất cả 17 chức năng mà chúng ta đã học cho đến nay trong hướng dẫn này