Question 199364 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to flip an image without moving it

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search