3

Here is a codepen example https://codepen.io/yury-leonov/pen/rZxxQE

Code from example:

$(".example").on("click", function(e){
  $(e.target).toggleClass("reverse");
})
.reverse{
    transform: scaleX(-1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="width: 700px;height: 700px;margin-left: 100px">
    <svg viewBox="-200 0 700 700">
        <image class="example" href="https://i.pinimg.com/originals/6f/3d/6a/6f3d6aab605e25af947d804c4a2cb558.jpg" width="150px" height="150px" x="50", y="50"/>
        <image class="example" href="https://i.pinimg.com/originals/6f/3d/6a/6f3d6aab605e25af947d804c4a2cb558.jpg" width="150px" height="100px" x="100", y="0"/>
      <!--x value can be changed during time-->
    </svg>
</div>

Issue:

Arrow moves from its position

Expected:

Arrow is reversed. Stay at same place. Do it only based on css (without js calculating final x-value and setting it up)

PS:

hardcode for translateX(-???px) is not an option, because there could be many objects which should be reversed.

3 Answers 3

6

Use 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="width: 700px;height: 700px;margin-left: 100px">
    <svg viewBox="-200 0 700 700">
        <image class="example" href="https://i.pinimg.com/originals/6f/3d/6a/6f3d6aab605e25af947d804c4a2cb558.jpg" width="150px" height="150px" x="50", y="50"/>
        <image class="example" href="https://i.pinimg.com/originals/6f/3d/6a/6f3d6aab605e25af947d804c4a2cb558.jpg" width="150px" height="100px" x="100", y="0"/>
      <!--x value can be changed during time-->
    </svg>
</div>

2

Based on the answer of @Robert Longson, the idea was born to make a mini-animation of the characters - girls and a guy.
Their images will rotate, turn away from each other. Other options are possible. In my opinion this should look rather interesting.

Rotate back and forth of each image after clicking on the selected image.

$(".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%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container" >
    <svg viewBox="0 0 700 700">
        <image class="example" href="https://i.stack.imgur.com/eM5im.png" width="300px" height="450px" x="50", y="50"/>
        <image class="example" href="https://i.stack.imgur.com/eFoj1.jpg" width="300px" height="450px" x="350", y="0"/>
    </svg>
</div>

-1

I found a solution but I'm not sure you will like it: I set transform origin at half of the image width(75px) and added the x coordinate(50px) so it will be 75+50=125px.

.reverse{
    transform-origin: 125px;
    transform: scaleX(-1);
}
4
  • Sorry, this solution is not working. Because it's hardcoded. I've added 2-nd array on SVG and how you can check - transform-origin: 125px; - is working only for one arrow Sep 1, 2018 at 21:04
  • Not really, you can use javascript to calculate based on these attributes.
    – Alex C
    Sep 1, 2018 at 21:05
  • Please pay attention to "(without js calculating final x-value and setting it up)" How to make it with JS - I know. How to make it without - I can't find solution. Sep 1, 2018 at 21:06
  • Oh sorry didn't see that. My mistake.
    – Alex C
    Sep 1, 2018 at 21:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.