Du kan vende billeder med CSS! Muligt scenarie: kun at have en grafik til en “pil”, men vende den rundt for at pege i forskellige retninger.
.flip-horizontally ( transform: scaleX(-1); )Se hvordan en pil bruges til at pege begge retninger her:
Se pennen
flip et billede af CSS-Tricks (@ css-tricks)
på CodePen.
Rotation er en anden mulighed, hvilket betyder, at vores ene pil kan gå mange retninger:
Se pennen
flip et billede af CSS-Tricks (@ css-tricks)
på CodePen.
Dette er også et hvilket som helst billede eller virkelig et hvilket som helst element.
Se pennen
flip et billede af CSS-Tricks (@ css-tricks)
på CodePen.
Gamle leverandørpræfikser
For eftertiden:
img ( -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; )