DEMO

Question

我正在使用一个使用Bootstrap的应用程序。您可以自己查看here。当用户点击链接时，我希望它能够旋转。代码非常小。它看起来像这样：

<div class="form-group">
  <ul class="list-inline">
    <li><button class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></button></li>
    <li><h5>category</h5></li>
  </ul>
</div>

当用户点击“v”时，我希望它从“v”动画到“＆gt;”。换句话说，当有人点击它时，我希望人字形逆时针旋转90度。在查看CSS 3中的强大功能之后，看起来有一种方法可以使用纯CSS来实现。我是对的，如果是的话，怎么样？

Answer 1

试试这个：

DEMO

<div class="form-group">
  <ul class="list-inline">
    <li><button class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></button></li>
    <li><h5>category</h5></li>
  </ul>
</div>

SCRIPT：

   $('.glyphicon').on('click', function(){
    $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
  });

Answer 2

要使用CSS旋转元素，您只需使用transform: rotate(-90deg)

即可

但是，这还不会在点击时旋转它。你可能需要javascript。一种方法（使用jquery，因为bootstrap已经需要它）：

CSS：

.rotated {
    transform: rotate(-90deg);
}

JS：

$('.yourElement').click(function() {
    $(this).toggleClass('rotated');
});

＆＃39; toggleClass＆＃39;将再次单击时确保恢复旋转。否则，只需使用＆quot; addClass＆＃39;只使用一次。

修改

正如哈利指出的那样，你也可以使用已经存在的图标 - 雪佛龙 - 右边的＆＃39;以类似的方式：

$('.yourElement').click(function() { $(this).toggleClass('icon-chevron-down icon-chevron-right'); });

只要您的html只使用这两个类中的一个开始，此代码将始终删除一个并添加另一个。

Answer 3

Css：

.spinEffect{
  -webkit-animation: spin 0.5s infinite linear;
}

jQuery：

$(function(){
    $(".whatIsClicked").click(function(){
        $("#yourDiv").addClass("spinEffect");
    });
});

Answer 4

您可以使用这样的简单脚本。

脚本： -

$(document).ready(function(){
    $( ".btn.btn-link" ).click(function() {
        $(this).toggleClass( "rotate" );
    });
})

css： -

.rotate{  
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

HTML： -

<div class="form-group">
    <ul class="list-inline">
        <li><button class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></button></li>
        <li><h5>category</h5></li>
    </ul>
</div>

希望它能帮助你！

通过CSS旋转图像

4 个答案:

DEMO