Question

我正在使用<i class="icon-play icon-white"></i>，我想要达到的目的是将其旋转90度。虽然像.scale()这样的其他mixins可以正常工作，但旋转不是。我错过了什么吗？

Answer 1

作为@Lipis评论的结果，这是我的评论在答案中解释。

纯CSS解决方案：

<i class="icon-search" id="rotate"></i>

#rotate {  
  -webkit-transform:rotate(120deg);
  -moz-transform:rotate(120deg);
  -o-transform:rotate(120deg);
  /* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5); */
  -ms-transform:rotate(120deg);        
}

或者使用Bootstrap的mixins和LessCSS：

#rotate {  
  .rotate(120deg); 
}

请记住，旧浏览器不支持此CSS。

请参阅jsfiddle了解演示。

Answer 2

你不能对pseduo元素进行转换（比如：之前），这就是图标字体经常被实现的方式。使用Bootstrap的字形，有background-image：url（“../ img / glyphicons-halflings.png”）; （就像在那个jsfiddle演示中）。另请参阅：Applying WebKit transitions to Pseudo Elements和此：http://css-tricks.com/transitions-and-animations-on-css-generated-content/

如何将.rotate（）混合应用于Bootstrap的<i> Icon Glyph元素？</i>

2 个答案: