Lật hình ảnh - Thủ thuật CSS

Anonim

Bạn có thể lật hình ảnh bằng CSS! Tình huống có thể xảy ra: chỉ có một hình ảnh cho một “mũi tên”, nhưng lật nó xung quanh để trỏ theo các hướng khác nhau.

.flip-horizontally ( transform: scaleX(-1); )

Xem cách một mũi tên được sử dụng để trỏ cả hai hướng tại đây:

Xem Pen
Flip an Image by CSS-Tricks (@ css-trick)
trên CodePen.

Xoay vòng là một khả năng khác, có nghĩa là một mũi tên của chúng ta có thể đi nhiều hướng:

Xem Pen
Flip an Image by CSS-Tricks (@ css-trick)
trên CodePen.

Đây cũng là bất kỳ hình ảnh nào, hoặc thực sự là bất kỳ phần tử nào.

Xem Pen
Flip an Image by CSS-Tricks (@ css-trick)
trên CodePen.

Tiền tố nhà cung cấp cũ

Đối với hậu thế:

img ( -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; )