SVG。使用CSS反转图像。将图片放在同一位置

Question

这是一个Codepen示例https://codepen.io/yury-leonov/pen/rZxxQE

示例代码：

$(".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>

问题：

箭头从其位置移动

预期：

箭头反转。留在同一个地方。仅基于CSS执行此操作（无需js计算最终的x值并进行设置）

PS：

translateX（-??? px）的硬代码不是一种选择，因为可能有许多对象应该颠倒。

Answer 1

使用transform-origin和transform-b​​ox

$(".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>

Answer 2

基于@Robert Longson的回答，这个主意是为了对角色（女孩和男孩）进行微型动画制作的。
他们的图像将旋转，彼此远离。其他选项也是可能的。我认为这应该看起来很有趣。

单击所选图像后，在每个图像之间来回旋转。

@foreach($nodes as $key => $node)   
    <div class="uk-width-1-1">
        <div class="uk-grid ">
            <div class="uk-width-2-6">
            {{$node->id}} - {{$node->name}}
            </div>
            <div class="uk-width-2-6 ">
                <span>{{ $node->comment }}</span> 
                 <a href="#edit-edit-modal{{ $key }}" data-uk-modal><span class="uk-icon-button"></span></a> 
            </div>
        </div>
    </div>
@endforeach


@foreach($nodes as $key => $node)
<div id="edit-edit-modal{{ $key }}" class="uk-modal">  
    <div class="uk-modal-dialog">
            <div class="uk-width-1-1">
                <div class="uk-grid uk-grid-small">
                    <div class="uk-width-2-10">
                    {{$node->id}} - {{$node->name}}
                    </div>
                    <div class="uk-width-2-10 testComment">
                        <span>{{ $node->comment }}</span> 
                    </div>
                </div>
            </div>
    </div>
</div>
@endforeach

$(".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%;
}

Answer 3

我找到了解决方案，但不确定您是否会喜欢它： 我将变换原点设置为图像宽度的一半（75px）并添加了 x坐标（50px），因此它将为75 + 50 = 125px。

.reverse{
    transform-origin: 125px;
    transform: scaleX(-1);
}