Μπορείτε να αναστρέψετε εικόνες με CSS! Πιθανό σενάριο: να έχεις μόνο ένα γραφικό για ένα «βέλος», αλλά να το γυρίζεις για να δείχνει σε διαφορετικές κατευθύνσεις
.flip-horizontally ( transform: scaleX(-1); )Δείτε πώς χρησιμοποιείται ένα βέλος για να δείξετε και τις δύο κατευθύνσεις εδώ:
Δείτε το Pen
Flip
a Image by CSS-Tricks (@ css-tricks) στο CodePen.
Η περιστροφή είναι μια άλλη δυνατότητα, που σημαίνει ότι το ένα βέλος μας μπορεί να πάει πολλές κατευθύνσεις:
Δείτε το Pen
Flip
a Image by CSS-Tricks (@ css-tricks) στο CodePen.
Αυτή είναι και οποιαδήποτε εικόνα, ή πραγματικά οποιοδήποτε στοιχείο.
Δείτε το Pen
Flip
a Image by CSS-Tricks (@ css-tricks) στο CodePen.
Προθέματα παλιού προμηθευτή
Για τα παιδιά:
img ( -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; )