Kép megfordítása - CSS-trükkök

Anonim

Képeket CSS-sel megfordíthat! Lehetséges forgatókönyv: Csak egy grafika legyen a „nyílnak”, de körbeforgatja, hogy különböző irányokba mutasson.

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

Itt láthatja, hogy egy nyíl hogyan mutat mindkét irányt:

Lásd
: CSS-Tricks (@ css-tricks)
tollal fordítson képet a CodePen-en.

A forgatás egy másik lehetőség, ami azt jelenti, hogy egy nyílunk sok irányba haladhat:

Lásd
: CSS-Tricks (@ css-tricks)
tollal fordítson képet a CodePen-en.

Ez is bármilyen kép, vagy valójában bármilyen elem.

Lásd
: CSS-Tricks (@ css-tricks)
tollal fordítson képet a CodePen-en.

Régi szállító előtagok

Az utókor számára:

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