Обърнете изображение - CSS-трикове

Anonim

Можете да обръщате изображения с CSS! Възможен сценарий: да имате само една графика за „стрелка“, но да я обърнете, за да сочи в различни посоки.

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

Вижте как една стрелка се използва за посочване на двете посоки тук:

Вижте писалката,
обърнете изображение от CSS-Tricks (@ css-tricks)
на CodePen.

Завъртането е друга възможност, което означава, че нашата една стрелка може да отиде в много посоки:

Вижте писалката,
обърнете изображение от CSS-Tricks (@ css-tricks)
на CodePen.

Това също е всяко изображение или наистина някакъв елемент.

Вижте писалката,
обърнете изображение от 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"; )