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

<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来完成此操作。我是否正确，如果是的话，如何？

2014-09-10 JQuery Mobile

试试这个：

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'); 
    });

来源

2014-09-10 12:08:32

除了设置标志并执行removeClass和addClass之外，还可以使用单个“toggleClass”同时使用人字形和人字形。只要最初只有一个类被使用，它将总是添加一个，并在使用切换时删除另一个。 – 2014-09-10 12:12:19

是的好点！ – 2014-09-10 12:14:34

+1。同意斯蒂芬在那里的观点。可以简化像[这里]（http://www.bootply.com/ZfIyvBoSwE）。如果您愿意，请随时在答案中使用演示。 – Harry 2014-09-10 12:15:20

要使用CSS旋转的元素，你可以简单地使用transform: rotate(-90deg)

然而，这不会对点击旋转它只是还没有。你可能需要JavaScript。一个办法做到这一点（使用jQuery，因为自举已经要求它）：

CSS：

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

JS：

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

的 'toggleClass' 将确保旋转恢复时你再次点击它。否则，只需使用'addClass'即可使用一次。

编辑

正如Harry指出，你也可以使用已经存在“图标，雪佛龙权”以类似的方式：

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

只要你的HTML开始只有这两个类中的一个，此代码将始终删除一个并添加另一个。

来源

2014-09-10 12:06:48

应该已经有一个名为glyphicon-chevron-right的类用于旋转版本，所以也可以使用。目前的答案没有错，只是它会减少一些额外的代码:) – Harry 2014-09-10 12:09:08

我完全忽略了这一点，好点。杰克的回答虽然不太漂亮，但也涵盖了这一点。 – 2014-09-10 12:11:17

谢谢，我想我可能会更新我的答案与您的解决方案，因为我认为这是一个更好的。 – 2014-09-10 12:20:26

的CSS：

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

的jQuery：

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

来源

2014-09-10 12:09:11

你可以使用这样一个简单的脚本。

脚本： -

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

希望它能为你工作的奥尼尔！

来源

2014-09-10 12:13:11

通过CSS旋转图像

回答

DEMO

相关问题