How to flip an image without moving it

Question

In the example below, click on logo and you'll see - it is flipped but also moved
How to flip it without moving ?
I also tried this, without success:

.flip{transform:scaleX(-1) translatex(-50%);}

$('img').on('click', function(){
    $(this).addClass('flip');
 });

.flip{transform:scaleX(-1);}

.wrap{
  position:relative;
  width:50%;
  height:100px;
  background:darkorange;
 }
img{
  position:absolute;
  bottom:0;
  width:140px;
  left:50%;
  transform:translatex(-50%);
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='wrap'>
<img src='https://abuena.net/img/logo_01.png' alt='img'>
</div>

score 6 · Accepted Answer · answered Jul 03 '23 at 07:01

6

You also need to include the translate property in the .flip class.

Note that the order of properties is important, eg. scale before translate, and after will give you different outputs:

$('img').on('click', function() {
  $(this).toggleClass('flip');
});

.flip {
  transform: translateX(-50%) scaleX(-1);
}

.wrap {
  position: relative;
  width: 50%;
  height: 100px;
  background: darkorange;
}

img {
  position: absolute;
  bottom: 0;
  width: 140px;
  left: 50%;
  transform: translateX(-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='wrap'>
  <img src='https://abuena.net/img/logo_01.png' alt='img'>
</div>

answered Jul 03 '23 at 07:01

Anurag Srivastava

14,077
4
33
43

2

*Note that the order of properties is important, eg. scale before translate, and after will give you different outputs:* - this is very relevant, thank you for including that and not just "do it like this". – freedomn-m Jul 03 '23 at 07:03
ok, thanks a lot for the explanation – provance Jul 03 '23 at 07:04
2

Also note that a "new" transform will replace all of the existing transform properties, they are not cumulative Hence the need here to reapply the original -50%. – freedomn-m Jul 03 '23 at 07:05

score 3 · Answer 2 · answered Jul 03 '23 at 07:02

You need to apply an opposite translateX to counter the scaleX -1:

.flip{
transform:scaleX(-1) translatex(50%)
}

Note that a "new" transform will replace all of the existing transform properties, they do not add on.

$('img').on('click', function(){
    $(this).toggleClass('flip');
 });

.flip{
transform:scaleX(-1) translatex(50%)
}

.wrap{
  position:relative;
  width:50%;
  height:100px;
  background:darkorange;
 }
img{
  position:absolute;
  bottom:0;
  width:140px;
  left:50%;
  transform:translatex(-50%);
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='wrap'>
<img src='https://abuena.net/img/logo_01.png' alt='img'>
</div>

thanks a lot. I will accept Anurag's solution, just because it is posted earlier — provance, Jul 03 '23 at 07:05
No worries - the part about the order being relevant is quite important. — freedomn-m, Jul 03 '23 at 07:06

How to flip an image without moving it

2 Answers2