如何将 .rotate() 混合应用于 <i> Bootstrap 的图标字形元素？

Question

我正在使用<i class="icon-play icon-white"></i>，我想实现的是将其旋转 90 度。虽然其余的混音喜欢.scale()工作，但旋转不是。 我错过了什么吗？

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 元素进行转换（如 ：before），这是图标字体通常的实现方式。使用Bootstrap的字形，有background-image：url（"../img/glyphicons-halflings.png"）;（就像在那个 JSFIDDLE 演示中一样）。另请参阅：将 WebKit 过渡应用于伪元素和以下内容：http://css-tricks.com/transitions-and-animations-on-css-generated-content/