Vous pouvez retourner des images avec CSS! Scénario possible: avoir un seul graphique pour une «flèche», mais le retourner pour pointer dans différentes directions.
.flip-horizontally ( transform: scaleX(-1); )Voyez comment une flèche est utilisée pour pointer dans les deux directions ici:
Voir le Pen
Flip an Image par CSS-Tricks (@ css-tricks)
sur CodePen.
La rotation est une autre possibilité, ce qui signifie que notre flèche unique pourrait aller dans de nombreuses directions:
Voir le Pen
Flip an Image par CSS-Tricks (@ css-tricks)
sur CodePen.
C'est aussi n'importe quelle image, ou vraiment n'importe quel élément.
Voir le Pen
Flip an Image par CSS-Tricks (@ css-tricks)
sur CodePen.
Anciens préfixes de fournisseur
Pour la postérité:
img ( -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; )