Вы можете переворачивать изображения с помощью CSS! Возможный сценарий: есть только один рисунок для «стрелки», но он переворачивается, чтобы указывать в разных направлениях.
.flip-horizontally ( transform: scaleX(-1); )Посмотрите, как одна стрелка используется для указания обоих направлений здесь:
См. Статью Pen
Flip an Image от CSS-Tricks (@ css-tricks)
на CodePen.
Другая возможность - вращение, то есть наша единственная стрелка может двигаться в разных направлениях:
См. Статью Pen
Flip an Image от CSS-Tricks (@ css-tricks)
на CodePen.
Это тоже любое изображение или вообще любой элемент.
См. Статью Pen
Flip an Image от 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"; )