Puteți întoarce imagini cu CSS! Scenariu posibil: având un singur grafic pentru o „săgeată”, dar răsucind-o pentru a indica în direcții diferite.
.flip-horizontally ( transform: scaleX(-1); )Vedeți cum se folosește o săgeată pentru a indica ambele direcții aici:
Vedeți stiloul
Flip an Image de CSS-Tricks (@ css-tricks)
pe CodePen.
Rotirea este o altă posibilitate, ceea ce înseamnă că singura noastră săgeată ar putea merge pe multe direcții:
Vedeți stiloul
Flip an Image de CSS-Tricks (@ css-tricks)
pe CodePen.
Aceasta este și orice imagine sau chiar orice element.
Vedeți stiloul
Flip an Image de CSS-Tricks (@ css-tricks)
pe CodePen.
Prefixe vechi pentru furnizori
Pentru posteritate:
img ( -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; )