使用 jquery 获取图像的镜像答案

【问题标题】：get image's mirror image using jquery使用 jquery 获取图像的镜像
【发布时间】：2013-05-10 12:58:48
【问题描述】：

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

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

我刚刚得到one solution 使用 css 而不是 jquery，但我需要 jQuery 作为两个方向。

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

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

谢谢！！！

【问题讨论】：

【解决方案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);
  }

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

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

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

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

【讨论】：

谢谢@Simon 我知道如何使用 jQuery。
很高兴我能帮上忙。如果您的问题已得到解答，请不要忘记选择最佳答案。
我想以一种方式进行这些反射，当我单击 Reflect X 按钮时，它应该反映在 X 轴和 Y 轴的类似情况上。所以我使用 scaleX(-1) 而不是 scale() 作为 x 轴，但问题是当我这样做时，图像反映得很好，但它的位置正在改变。你能帮我把它保持在同一个地方，并把它反映在x轴上。谢谢

【解决方案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) */

【讨论】：