Capovolgi un'immagine - Trucchi CSS

Anonim

Puoi capovolgere le immagini con CSS! Possibile scenario: avere un solo grafico per una "freccia", ma capovolgerlo per puntare in direzioni diverse.

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

Guarda come viene utilizzata una freccia per indicare entrambe le direzioni qui:

Vedi Pen
Flip an Image di CSS-Tricks (@ css-tricks)
su CodePen.

La rotazione è un'altra possibilità, il che significa che la nostra unica freccia potrebbe andare in molte direzioni:

Vedi Pen
Flip an Image di CSS-Tricks (@ css-tricks)
su CodePen.

Anche questa è un'immagine, o davvero un qualsiasi elemento.

Vedi Pen
Flip an Image di CSS-Tricks (@ css-tricks)
su CodePen.

Vecchi prefissi del fornitore

Per i posteri:

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