通过CSS旋转图像 [英] Rotating image via CSS

问题描述

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

I am working on an app that uses Bootstrap. You can see it for yourself here. When a user clicks a link, I want it to rotate. The code is very small. It looks like this:

<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动画到> 。换句话说，当有人点击它时，我希望人字形逆时针旋转90度。看过CSS 3中的强大功能之后，看起来有一种方法可以使用纯CSS来完成此操作。我是否正确，如果是这样，怎么样？

When a user clicks the "v" I want it to animate from "v" to ">". In other words, I want the chevron to rotate counter-clockwise 90 degrees when someone clicks it. After looking at the powerful features in CSS 3, it looks like there is a way to do this using pure CSS. Am I correct, if so, how?

推荐答案

试试这个：

< h1> DEMO

Try this:

<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>

脚本：

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

这篇关于通过CSS旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！