Làm cách nào để xoay hình ảnh 180 độ css?

Bạn có thể dễ dàng xoay hình ảnh trong HTML bằng thuộc tính biến đổi CSS. Thuộc tính này được sử dụng để di chuyển, xoay, chia tỷ lệ và thực hiện các loại biến đổi khác nhau của các phần tử

Cách tiếp cận. Bạn có thể sử dụng hàm rotate() được định nghĩa là một phép biến đổi xoay một phần tử xung quanh một điểm cố định trên mặt phẳng 2D mà không làm biến dạng phần tử đó. Phải mất một tham số xác định góc quay. Góc quay bao gồm hai phần, giá trị của góc quay tiếp theo là đơn vị quay. Đơn vị có thể được xác định theo độ (deg), độ dốc (grad), radian (rad) và lần lượt. Giá trị với phương thức rotate() sẽ xoay một phần tử theo chiều kim đồng hồ

Ghi chú. Để xoay 90 độ, bất kỳ đơn vị nào cũng có thể được sử dụng với các giá trị tương ứng của chúng. 90 độ sẽ bằng 100 độ dốc hoặc 0. 25 lượt

 

cú pháp

transform: rotate(90deg);

Bạn nên thêm mã dưới đây vào CSS để mã của bạn tương thích với tất cả các trình duyệt chính vì những người sử dụng các trình duyệt khác sẽ nhìn thấy Nó lộn ngược

Trong các bài đăng trước, chúng tôi đã giải thích về cách xoay hình ảnh 360 độ bằng HTML hoặc về các hoạt ảnh CSS hữu ích, vì vậy trong bài viết này sử dụng thuộc tính CSS

.RotateImageBy90Degree {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

1, chúng tôi sẽ chỉ ra cách chúng tôi có thể xoay hình ảnh bằng CSS và HTML

Xoay ảnh bằng CSS

Nếu bạn đang tạo một ứng dụng web, bạn có thể cần chuyển đổi hoặc xoay hình ảnh bằng CSS, thì bạn có thể sử dụng thuộc tính CSS "

.RotateImageBy90Degree {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

1", có thể giúp bạn xoay hình ảnh, đây là ví dụ cơ bản mà chúng tôi đang tạo lớp để

.RotateImageBy90Degree {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

Vì vậy, hãy xem mẫu bên dưới, nơi chúng tôi đã cung cấp mã HTML có hình ảnh

Sau đó, bạn sẽ thấy hình ảnh được xoay 90 độ, như hình bên dưới

Đây là mẫu fiddle ở trên

HOẶC, bạn cũng có thể chỉ cần xoay hình ảnh bằng cách đưa inline-css

Nếu bạn muốn xoay hình ảnh 180 độ, bạn có thể thay đổi CSS của mình như bên dưới

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

và cho 270 độ như dưới đây

.RotateImageBy270Degree {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

Xem xét chúng tôi có HTML như dưới đây

Vì vậy, nếu bạn áp dụng các thay đổi trên hình ảnh trên, bạn sẽ thấy đầu ra như bên dưới

Xoay ảnh liên tục bằng CSS

Nếu bạn muốn xoay hình ảnh liên tục, bạn có thể sử dụng CSS

.RotateImageBy90Degree {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

1 với thuộc tính

2 với các khung hình chính

Hãy xem xét CSS dưới đây

________số 8

Trong CSS trên, chúng tôi đang sử dụng phép quay với biến đổi vô hạn, với tốc độ 2 giây mỗi lần quay

Nếu chúng tôi áp dụng CSS ở trên trên hình ảnh HTML bên dưới

Nó sẽ tiếp tục quay (vì chúng ta đã sử dụng vòng lặp vô hạn) trong khi mất 2 giây cho mỗi vòng lặp. (thời gian biến hình từ 0 -> 360 độ là 2 giây)

Đây là mẫu fiddle

Lật một hình ảnh

Bạn cũng có thể lật hình ảnh, sử dụng CSS

.RotateImageBy90Degree {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

1 với scaleX, cân nhắc sử dụng mã bên dưới, trong đó chúng tôi đang sử dụng một hình ảnh duy nhất của một mũi tên, nhưng hiển thị cả hai mũi tên trái và phải, với sự trợ giúp của CSS

.RotateImageBy90Degree {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

1

.RotateImageBy90Degree {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

0

Đầu ra bằng Fiddle

Vậy là xong, hi vọng bài viết này sẽ giúp bạn hiểu rõ khái niệm liên quan đến thuộc tính 'transform' CSS và cách chúng ta có thể sử dụng nó để xoay hình ảnh bằng HTML /CSS

Trong blog này, tôi sẽ chỉ cho bạn cách tạo một hình ảnh xoay 180 độ thú vị và hiển thị một hình ảnh khác ở vị trí của hình ảnh đầu tiên khi xoay

Để đạt được điều này, hãy tạo một div. Trong div đó, tạo thêm hai phần tử div con. Div con đầu tiên sẽ chứa hình ảnh phía trước để hiển thị, div thứ hai sẽ chứa hình ảnh phía sau sẽ được hiển thị

Khi ta rê chuột vào ảnh trước nó sẽ xoay 180 theo trục x và hiển thị ảnh sau

We will give outer div a class selector name image like

and first child with class selector name front and back image with back as class selector name.

Bây giờ, html của chúng ta đã sẵn sàng, không có bất kỳ thuộc tính CSS nào, hình ảnh xoay của chúng ta sẽ như bên dưới

Bây giờ, chúng ta hãy áp dụng ma thuật CSS. Trước đó, chúng ta hãy tìm hiểu về các Thuộc tính CSS được sử dụng

Thuộc tính CSS Mô tả

thuộc tính con trỏ

• Khi di chuột qua một phần tử, con trỏ chuột sẽ được hiển thị
• Ở đây, nó hiển thị con trỏ là con trỏ có nghĩa là con trỏ tay bằng ngón trỏ

Thuộc tính chiều rộng và chiều cao

• Chỉ định chiều rộng và chiều cao của hình ảnh

Trong HTML, chúng tôi đã thêm bộ chọn lớp với thẻ lớp. Trong CSS, chúng tôi xác định chúng bằng cách. [tên lớp]

Chúng ta có thể sử dụng lớp này với bất kỳ thẻ nào. Thẻ này sẽ cho phép chúng tôi thêm các thuộc tính kiểu vào thẻ HTML cụ thể đó

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

Làm cách nào để xoay hình dạng trong CSS?