Obrázky můžete převracet pomocí CSS! Možný scénář: mít pouze jednu grafiku pro „šipku“, ale otočit ji tak, aby ukazovala různými směry.
.flip-horizontally ( transform: scaleX(-1); )Podívejte se, jak se jedna šipka používá k nasměrování obou směrů, zde:
Podívejte se na Pen
Flip an Image by CSS-Tricks (@ css-tricks)
na CodePen.
Další možností je rotace, což znamená, že naše jedna šipka může jít mnoha směry:
Podívejte se na Pen
Flip an Image by CSS-Tricks (@ css-tricks)
na CodePen.
Toto je také jakýkoli obrázek nebo vůbec jakýkoli prvek.
Podívejte se na Pen
Flip an Image by CSS-Tricks (@ css-tricks)
na CodePen.
Předpony starých dodavatelů
Pro potomky:
img ( -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; )