Question

我试图用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/

Answer 1

它不能是内联显示元素。

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

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

Answer 2

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

这样你就可以获得更好的跨浏览器支持。

Answer 3

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

旋转<a> element</a>

3 个答案: