旋转& lt; a>元素

Rotate <a> element

本文关键字：元素 旋转 lt      更新时间：2023-09-26

我尝试用jquery旋转一个简单的<a> -元素:

 <a href="#" id="optbut2" style="margin-right: 8px;">

该元素位于列表中:

 <li class="list-group-item"><a href="#" id="optbut2" style="margin-right: 8px;">V</a><a href="#">Motorola</a></li>

由于我使用Chrome浏览器，我尝试:

$('#optbut2').css('-webkit-transform','rotate(20deg)');

但不知何故它不工作!我错在哪里?下面是一个演示:http://jsfiddle.net/52VtD/6059/

不能是内联显示元素。

$('#optbut2').css({
    'display' : 'inline-block',
    '-webkit-transform':'rotate(20deg)'
});
http://jsfiddle.net/52VtD/6060/

除了@AlienWebguy的回应，我还建议将Javascript更改为:

$('#optbut1').css({'display' : 'inline-block',
                 '-webkit-transform' : 'rotate(20deg)',
                 '-moz-transform' : 'rotate(20deg)',
                 '-ms-transform' : 'rotate(20deg)',
                 'transform' : 'rotate(20deg)'});
$('#optbut2').css({'display' : 'inline-block',
                 '-webkit-transform' : 'rotate(20deg)',
                 '-moz-transform' : 'rotate(20deg)',
                 '-ms-transform' : 'rotate(20deg)',
                 'transform' : 'rotate(20deg)'});

APAD1和AlienWebguy都提供了可行的解决方案。但是，除非每个元素的旋转是动态的或自定义的，否则我强烈建议通过添加/删除类而不是添加内联样式来实现。更干净的代码，并保持CSS在它所属的地方;在。css。您也不需要-ms和-o前缀(http://css3please.com/)

http://jsfiddle.net/52VtD/6064/

JS 

$('#optbut1').addClass("rotate");
CSS 

.rotate {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    display: inline-block;
}
相关文章：