使用jquery获取镜像的镜像

Question

我想得到镜像的镜像在x轴和y轴都使用jQuery。当用户点击按钮时，图像会变成它的镜像。

我不能在网上搜索它。

我只是使用css获得one solution，而不是jquery，但我需要jQuery用于这两个方向。

我想要一个接一个地做这些反射，当我点击反射X按钮时，它应该反射在X轴上，Y轴上也有类似的情况。

所以我对x轴使用了scaleX(-1)而不是scale()，但是当我这样做的时候，问题是图像反射得很好，但是它的位置正在改变。你能帮我把它放在同一位置，只在x轴上反射吗？

谢谢！

Answer 1

您可以使用CSS3镜像镜像

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);

要在jQuery中使用它，您可以这样做：

 .mirror {
     -moz-transform: scale(-1, 1);
     -webkit-transform: scale(-1, 1);
     transform: scale(-1, 1);
  }

然后将类"mirror“添加到对象中。

$('object').addClass('mirror');

要使其恢复正常，只需将其移除：

 $('object').removeClass('mirror');

Answer 2

您可以使用CSS来实现这一点。

transform: scale(-1, -1)

这会将X和Y都设置为-1。

第一个是X，第二个是Y。

来自MozDev：

transform:  scale(sx[, sy]);     /* one or two unitless <number>s, e.g.  scale(2.1,4) */

https://developer.mozilla.org/en-US/docs/CSS/transform