Làm cách nào để áp dụng .rotate() trộn vào một phần tử biểu tượng Glyph của Bootstrap <i>?

Question

Tôi đang sử dụng <i class="icon-play icon-white"></i> và những gì tôi muốn đạt được là xoay 90 độ. Mặc dù phần còn lại của mixin như .scale() hoạt động, xoay vòng thì không. Tui bỏ lỡ điều gì vậy?

Answer 1

Là kết quả của nhận xét @Lipis, đây là nhận xét của tôi được giải thích trong câu trả lời.

giải pháp tinh khiết 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);   
} 

Hoặc sử dụng mixins Bootstrap và LessCSS:

#rotate { 
    .rotate(120deg); 
} 

Hãy ghi nhớ các trình duyệt cũ không hỗ trợ css này.

Xem jsfiddle để có bản trình diễn.

Answer 2

Bạn không thể thực hiện chuyển đổi trên phần tử pseduo (như: trước đây), đó là cách phông chữ biểu tượng thường được triển khai. Với glyphs của Bootstrap, có background-image: url ("../ img/glyphicons-halflings.png"); (giống như trong bản demo jsfiddle). Ngoài ra, hãy xem điều này: Applying WebKit transitions to Pseudo Elements và điều này: http://css-tricks.com/transitions-and-animations-on-css-generated-content/