css - Bootstrap の Icon Glyph 要素に.rotate() ミキシングを適用するにはどうすればよいですか?

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のミックスインと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/