Wie kann ich mich bewerben .rotate() mischen, um eine <i> Symbol Glyphe ' element von Bootstrap?

Ich bin mit <i class="icon-play icon-white"></i> und was ich erreichen möchte ist, drehen Sie es um 90 Grad. Obwohl der rest von Mixins in Verbindung wie .scale() arbeiten, drehen ist nicht. Bin ich etwas fehlt?

  • Können Sie nicht, tun Sie dies mit reinem css? jsfiddle.net/EBXPn funktioniert bei mir.
  • nur hinzufügen, dass so eine Antwort.. 🙂 Funktioniert einwandfrei..
  • wie Sie vorgeschlagen, jetzt eine Antwort.
  • dieser ist sehr nett und funktioniert, aber es wäre eleganter und flexibler, es zu tun mit der lessCSS-Funktion.
InformationsquelleAutor topless | 2012-05-15
  1. 13

    Als ein Ergebnis von @Lipis Kommentar, hier ist mein Kommentar erläutert in einer Antwort.

    Reine CSS-Lösung:

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

    Oder Verwendung von Bootstrap ist Mixins in Verbindung und LessCSS:

    #rotate {  
  .rotate(120deg); 
}

    Beachten Sie, dass ältere Browser nicht unterstützen diese css.

    Sehen jsfiddle für eine demo.

    • Ich denke, mit Bootstrap ist Mixins in Verbindung, können Sie einfach schreiben .rotate(120deg);, also bitte überprüfen und dann wahrscheinlich nur aktualisieren Sie die Antwort für die Bootstrap-spezifische Dingens..
    • danke es erforderlich, Grad nach der Nummer Eingabe.
    InformationsquelleAutor Tim
  2. 4

    Können Sie nicht tun, eine Transformation auf einer pseduo-element (wie :vor, mit dem Symbol Schriftarten, die oft umgesetzt werden. Mit Bootstrap-Glyphen, es gibt background-image:url("../img/glyphicons-Halblinge.png"); (wie in diesem jsfiddle demo). Auch zu sehen: Die Anwendung WebKit-übergänge Pseudo-Elemente und so: http://css-tricks.com/transitions-and-animations-on-css-generated-content/

    • Icon-Font ist hier zu bleiben 🙂 bereits verschoben.
    InformationsquelleAutor Cliff P
Schreibe einen Kommentar