Balik Gambar - Trik CSS

Anonim

Anda dapat membalik gambar dengan CSS! Skenario yang mungkin: hanya memiliki satu grafik untuk “panah”, tetapi membaliknya untuk menunjuk ke arah yang berbeda.

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

Lihat bagaimana satu panah digunakan untuk menunjukkan kedua arah di sini:

Lihat Pen
Flip an Image by CSS-Tricks (@ css-trick)
di CodePen.

Rotasi adalah kemungkinan lain, artinya satu panah kita bisa pergi ke banyak arah:

Lihat Pen
Flip an Image by CSS-Tricks (@ css-trick)
di CodePen.

Ini adalah gambar juga, atau elemen apa pun.

Lihat Pen
Flip an Image by CSS-Tricks (@ css-trick)
di CodePen.

Awalan Vendor Lama

Untuk anak cucu:

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