jquery - 使用jquery获取图像的镜像

Question

我想使用 jQuery 在 x 轴和 y 轴上获取图像的镜像。当用户单击按钮图像更改为它的镜像。

我无法在互联网上搜索它。

我刚刚得到了一个使用 css 而不是 jquery 的解决方案，但我需要 jQuery 来实现这两个方向。

当我单击 Reflect X 按钮时，我想以一种方式进行这些反射，它应该反映在 X 轴和 Y 轴的类似情况上。

所以我使用 scaleX(-1) 而不是 scale() 作为 x 轴，但问题是当我这样做时，图像反映得很好，但它的位置正在改变。你能帮我把它保持在同一个地方，并把它反映在x轴上。

谢谢！！！

score 6 · Accepted Answer

您可以使用 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);
  }

然后将类“镜像”添加到对象。

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

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

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

score 2 · Accepted Answer

您可以为此使用 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) */

2 回答 2