Реверс изображения с помощью CSS с сохранением той же позиции

#html #css #css3 #svg #анимация

Вот пример кода:     https://codepen.io/yury-leonov/pen/rZxxQE 



$(".example").on("click", function(e){
  $(e.target).toggleClass("reverse");
})
.reverse{
    transform: scaleX(-1);
}



    



   

Проблема:   

При вращении стрелка перемещается из своего положения.

Ожидаемое:   

Стрелка должна оставайться там же. Необходимо сделать на основе css (без js, вычисляющего
конечное значение x) 

PS:   

Применение translateX (- ??? px) - не является вариантом, потому что может быть много
объектов, которые должны вращаться.
    

Ответы

Ответ 1

Используйте transform-origin and transform-box  



$(".example").on("click", function(e){
  $(e.target).toggleClass("reverse");
})
.reverse{
    transform: scaleX(-1);
    transform-origin: center;
    transform-box: fill-box;
}



    





Источник ответа: @Robert Longson


Ответ 2

На основе ответа Robert Longson можно сделать  мини анимацию персонажей,- девушки
и парня. 

Их изображения будут поворачиваться, отворачиваться друг от друга. Возможны другие
варианты. На мой взгляд это должно выглядеть довольно интересно.

Этот вариант решения может иметь и практическое применение, когда иконки .png поворачиваются
и осуществляется, какое-то действие.    

Поворот туда-сюда каждого изображения после клика на выбранном изображении.



$(".example").on("click", function(e){
  $(e.target).toggleClass("reverse");
})
.reverse{
    transform: scaleX(-1);
    transform-origin: center;
    transform-box: fill-box;
}
.container {
 width:50%;
 height:50%;
}



    





Приложение адаптивно и работает во всех современных браузерах, кроме IE    

Источник ответа:@Alexandr_TT