css - 如何将 .rotate() 混合应用到Bootstrap 的 Icon Glyph 元素？

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

您不能对伪元素（例如 :before）进行转换，这通常是图标字体的实现方式。使用 Bootstrap 的字形，有 background-image:url("../img/glyphicons-halflings.png"); （就像在那个 jsfiddle 演示中一样）。另请参阅：将 WebKit 转换应用于伪元素和此：http ://css-tricks.com/transitions-and-animations-on-css-generated-content/