Làm cách nào để lật hình ảnh trong css?

Rotating an image on a web page is possible using a CSS rotate class, which is added to any

Xoay hình ảnh bằng CSS

Mã CSS cần bao gồm mã chuyển đổi cho từng trình duyệt Internet chính để hình ảnh được xoay trong tất cả các trình duyệt

Dưới đây là một ví dụ về mã CSS để xoay hình ảnh 180 độ

.rotateimg180 {
  -webkit-transform:rotate[180deg];
  -moz-transform: rotate[180deg];
  -ms-transform: rotate[180deg];
  -o-transform: rotate[180deg];
  transform: rotate[180deg];
}

The CSS code above should be added to a .css stylesheet file linked in your HTML. For example, if your CSS file is named site.css and in the same directory as your HTML file, you can include the following HTML in the element:

Ngoài ra, bạn có thể bao gồm mã CSS nội tuyến, trong thẻ kiểu xuất hiện trước thẻ hình ảnh hoặc trong thuộc tính kiểu của thẻ hình ảnh

Once the CSS code is applied to your .css file, stylesheet, or tags, you can use the CSS class name in any of your image tags.

Mẹo

To rotate an image by another measure of degrees, change the "180" in the CSS code and

Để lật các hình ảnh xung quanh, chúng ta sẽ sử dụng thuộc tính 

4 . Đối với 

.card {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

0 chính nó, chúng ta cần thêm kích thước mà chúng ta cần [trong ví dụ này, chúng ta đang sử dụng 100x100px] và đặt

.card {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

1 của nó thành

.card {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

2.   

.card {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

Đã sao chép vào khay nhớ tạm. Sao chép

Mặc dù không bắt buộc, việc thêm

.card {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

3 là một cách hay để chỉ ra rằng phần tử này có tính tương tác. Đối với mặt trước và mặt sau của thẻ, chúng tôi sẽ cần chúng ở vị trí tuyệt đối, với chiều rộng và chiều cao 100%

________số 8

Đã sao chép vào khay nhớ tạm. Sao chép

Tuy nhiên, phần quan trọng nhất là hai quy tắc cuối cùng. Chúng tôi cần sử dụng 

.card {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

4 trên thuộc tính 

4 để tạo hoạt ảnh sau khi chúng tôi bắt đầu lật hình ảnh. Chúng tôi đang sử dụng một khối bezier ở đây để nới lỏng

Tôi khuyên bạn nên kiểm tra các nới lỏng. net và cubic-bezier. com nếu bạn muốn thử nghiệm các chức năng nới lỏng khác nhau.   

Quy tắc quan trọng khác là 

.card {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

6. Điều này được sử dụng để nói với CSS rằng mặt sau của một phần tử sẽ không hiển thị với chúng tôi. Điều này có nghĩa là chúng ta sẽ không nhìn thấy hình ảnh nếu lật thẻ

Khả năng hiển thị của backface ảnh hưởng đến một phần tử như thế nào

Lật hình ảnh trong CSS bằng Transform

Để xoay mặt sau của thẻ vào đúng vị trí, chúng ta cần thêm quy tắc

4 để xoay thẻ 180 độ trên trục Y. Điều này sẽ xoay mặt sau của thẻ 180 độ ra khỏi chúng tôi

1 Thêm quy tắc chuyển đổi cho hiệu ứng lật

Đã sao chép vào khay nhớ tạm. Sao chép

Khi chúng tôi di chuột qua vùng chứa, chúng tôi muốn làm tương tự cho mặt trước của thẻ và làm ngược lại cho mặt sau. xóa

.card {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

8 và đặt lại về 0. Với mọi thứ được thêm vào, bây giờ chúng ta sẽ có hình ảnh lật. Di chuột qua ví dụ bên dưới để xem hiệu ứng trông như thế nào

🍅

🥔

Thêm Xoay vào Flip

Tuy nhiên, lật trông khá phẳng theo cách này. Chúng ta có thể dễ dàng giải quyết vấn đề này bằng cách xoay phần tử trên trục Z. Thay đổi quy tắc

4 như sau

3 Thêm rotateZ để thêm góc xoay khi lật

Đã sao chép vào khay nhớ tạm. Sao chép

Ở đây bây giờ chúng tôi cũng đã giới thiệu một góc xoay 50 độ cho trục Z. Cũng giống như đối với Y, chúng tôi muốn sao chép cùng một logic. Bất cứ khi nào hình ảnh được lật, chúng tôi muốn loại bỏ xoay từ trục Z cho mặt sau của thẻ và thêm nó cho mặt trước. Điều này sẽ tạo ra hiệu ứng sau

Chúng ta có thể lật hình ảnh bằng CSS không?

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