Een afbeelding omdraaien - CSS-trucs

Anonim

U kunt afbeeldingen omdraaien met CSS! Mogelijk scenario: slechts één afbeelding hebben voor een "pijl", maar deze omdraaien om in verschillende richtingen te wijzen.

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

Bekijk hier hoe één pijl wordt gebruikt om beide richtingen aan te wijzen:

Zie de Pen
Een afbeelding
omdraaien door CSS-Tricks (@ css-tricks) op CodePen.

Rotatie is een andere mogelijkheid, wat betekent dat onze ene pijl veel kanten op kan:

Zie de Pen
Een afbeelding
omdraaien door CSS-Tricks (@ css-tricks) op CodePen.

Dit is ook een afbeelding, of eigenlijk helemaal geen element.

Zie de Pen
Een afbeelding
omdraaien door CSS-Tricks (@ css-tricks) op CodePen.

Oude leveranciersvoorvoegsels

Voor het nageslacht:

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