Balik Imej - Trik CSS

Anonim

Anda boleh membalikkan gambar dengan CSS! Kemungkinan senario: hanya mempunyai satu grafik untuk "anak panah", tetapi membalikkannya untuk menunjuk ke arah yang berbeza.

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

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

Lihat Pen
Balik Imej oleh CSS-Tricks (@ css-tricks)
di CodePen.

Putaran adalah kemungkinan lain, yang bermaksud satu anak panah kita dapat menuju ke banyak arah:

Lihat Pen
Balik Imej oleh CSS-Tricks (@ css-tricks)
di CodePen.

Ini adalah gambar apa pun, atau unsur apa pun.

Lihat Pen
Balik Imej oleh CSS-Tricks (@ css-tricks)
di CodePen.

Awalan Vendor Lama

Untuk keturunan:

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