मैं कैसे लागू कर सकता हूं .rotate() <i> बूटस्ट्रैप के आइकन ग्लिफ तत्व में मिलाकर?

Question

मैं <i class="icon-play icon-white"></i> का उपयोग कर रहा हूं और जो मैं प्राप्त करना चाहता हूं वह 90 डिग्री घुमाने के लिए है। हालांकि शेष मिश्रण .scale() काम करते हैं, घुमावदार नहीं है। क्या मैं कुछ भूल रहा हूँ?

Answer 1

@ लिपिस टिप्पणी के परिणामस्वरूप, मेरी टिप्पणी एक उत्तर में समझाई गई है।

शुद्ध सीएसएस समाधान:

<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);   
} 

या इसका उपयोग करते बूटस्ट्रैप के mixins और Lesscss:

#rotate { 
    .rotate(120deg); 
} 

मन पुराने ब्राउज़र में रखें कि यह सीएसएस का समर्थन नहीं करते।

डेमो के लिए jsfiddle देखें।

Answer 2

आप एक pseduo तत्व (जैसे: पहले) पर एक परिवर्तन नहीं कर सकते हैं, इस तरह आइकन आइकन अक्सर लागू होते हैं। बूटस्ट्रैप के ग्लिफ के साथ, पृष्ठभूमि-छवि है: url ("../ img/glyphicons-halflings.png"); (उस jsfiddle डेमो में की तरह)। यह भी देखें: Applying WebKit transitions to Pseudo Elements और यह: http://css-tricks.com/transitions-and-animations-on-css-generated-content/