Du kan vende bilder med CSS! Mulig scenario: å ha bare en grafikk for en “pil”, men snu den rundt for å peke i forskjellige retninger.
.flip-horizontally ( transform: scaleX(-1); )Se hvordan en pil brukes til å peke begge retninger her:
Se pennen
vende et bilde av CSS-Tricks (@ css-tricks)
på CodePen.
Rotasjon er en annen mulighet, noe som betyr at vår ene pil kan gå mange retninger:
Se pennen
vende et bilde av CSS-Tricks (@ css-tricks)
på CodePen.
Dette er et hvilket som helst bilde, eller egentlig noe element i det hele tatt.
Se pennen
vende et bilde av CSS-Tricks (@ css-tricks)
på CodePen.
Gamle leverandørprefikser
For ettertiden:
img ( -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; )