Question

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

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

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

例如，“刷新”的图标非常方便，可以顺时针或逆时针“旋转”以查看图像。有没有办法做到这一点，而不必获得新的图标？

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

Answer 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;
}

Answer 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)")
})

Answer 3

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

$dbh = new PDO("mysql:host=127.0.0.1;dbname=recycle;charset=utf8",'root','');

编辑：@matrixugly它确实，rotateY镜像div，基本上给你一个逆时针的图标，反之亦然

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

3 个答案: