有没有办法反转 jQuery UI 图标或 Bootstrap 图标？答案

【问题标题】：Is there a way to Invert jQuery UI icons or Bootstrap icons?有没有办法反转 jQuery UI 图标或 Bootstrap 图标？
【发布时间】：2015-11-24 17:58:40
【问题描述】：

很简单的问题。我希望能够垂直反转图标。使用 jQuery UI 或 Bootstrap 图标。

http://api.jqueryui.com/theming/icons/

http://getbootstrap.com/2.3.2/base-css.html#icons

例如，“刷新”图标作为“旋转”顺时针或逆时针查看图像时非常方便。有没有办法做到这一点而无需获取新图标？

澄清：我不想旋转图像。我想取一个非对称图标并将其反转，以便得到它的镜像。

【问题讨论】：

标签： javascript jquery css twitter-bootstrap jquery-ui

【解决方案1】：

您可以在要旋转的图标上应用 css 类我已经创建了一个小提琴，你可以在这里查看

https://jsbin.com/rekuse/edit?html,css,js,output

.rotate-90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
 }

如果你想翻转图标，那么这个

.flip {
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: FlipH;
}

【讨论】：

这只是旋转图像吧？如果我有一个顺时针方向的箭头图标，然后你旋转它，它仍然指向顺时针方向。目标是将顺时针图标变为逆时针。
嘭，就是这样！谢谢！我编辑了你的小提琴，所以它显示了翻转图标和常规图标之间的区别。 jsbin.com/lobaciwoye/1/edit?html,css,js,output
伟大...保持快乐..保持祝福:)

【解决方案2】：

为了创建一个可重复的旋转，你可以这样做：

$(".rotate-left").click(function(){
  var $img = $(".Image");
  var rotation = ($img.prop("angle")||0)+90;
  $img.prop("angle", rotation%360);
  $img.css("transform","rotate("+$img.prop("angle")+"deg)")
})

向右旋转也是如此：

$(".rotate-right").click(function(){
  var $img = $(".Image");
  var rotation = ($img.prop("angle")||0)-90;
  $img.prop("angle", rotation%360);
  $img.css("transform","rotate("+$img.prop("angle")+"deg)")
})

【讨论】：

这只是旋转图像。这在图像不对称的情况下不起作用。

【解决方案3】：

要进行图标旋转，您只需将 .rotated 类附加到图标即可。

.rotated {transform: rotateY(180deg);}

编辑：@matrixugly 确实如此，rotateY 镜像 div，本质上为您提供与其对应的逆向图标，反之亦然

【讨论】：

查看问题。我不想旋转，而是翻转。
是的，它在 Y 轴上旋转，如您在帖子中所说，它为您提供镜像。 jsfiddle.net/AtheistP3ace/L17950wk
这是个好主意，但如果图标不对称，这将不起作用。例如，指向逆时针旋转 180 度的箭头仍将指向逆时针方向。在图标是对称的假设下，您的想法确实有效。 :)
不，它确实适用于不对称图标。这是小提琴。 jsfiddle.net/jpL2ebzf/2