SVG. Reverse image using css. Keep image at the same place

问题

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.

回答1:

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>

回答3:

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);
}

来源：https://stackoverflow.com/questions/52131952/svg-reverse-image-using-css-keep-image-at-the-same-place

标签

css

image

css3

svg

css-animations