Odwróć obraz - CSS-Tricks

Anonim

Możesz odwracać obrazy za pomocą CSS! Możliwy scenariusz: posiadanie tylko jednej grafiki dla „strzałki”, ale odwracanie jej w celu wskazania w różnych kierunkach.

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

Zobacz, jak jedna strzałka jest używana do wskazywania obu kierunków:

Zobacz, jak Pen
Flip an Image by CSS-Tricks (@ css-tricks)
na CodePen.

Rotacja to kolejna możliwość, co oznacza, że ​​nasza jedna strzała może iść w wielu kierunkach:

Zobacz, jak Pen
Flip an Image by CSS-Tricks (@ css-tricks)
na CodePen.

To też jest dowolny obraz, a właściwie jakikolwiek element.

Zobacz, jak Pen
Flip an Image by CSS-Tricks (@ css-tricks)
na CodePen.

Stare prefiksy dostawców

Dla potomnych:

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