J'essaie de faire pivoter les glyphicons de mon site bootstrap en vol stationnaire (en plus du changement de couleur).
Voici ma tentative: http://jsfiddle.net/young_greedo17/88g5P/
... qui utilise ce code:
<div class="widgetbox">
<br><br>
<div class="icon-calendar icon-large"></div>
<h5>Add an event</h5>
</div>
... voici le CSS:
.widgetbox {
width: 250px;
height: 250px;
background-color: black;
color: white;
text-align: center;
}
.widgetbox [class*="icon-"] {
-webkit-transition-duration: 1.0s;
-moz-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
transition-duration: 1.0s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.widgetbox:hover [class*="icon-"] {
color: #24a159 !important;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
Voici un exemple de ce que je cherche à survivre en vol stationnaire (voir la boîte de texte à quatre colonnes ATF): http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665
Évidemment, la couleur change, mais cela ne change pas non plus en fonction des paramètres que j'ai définis pour la transition dans le CSS.
Merci!
Le problème est que vous essayez de transformer un élément inline
- ce n'est pas possible.
Vous aurez besoin de changer la valeur d'affichage du glyphicon dans le bloc en ligne.
Voici les détails du module de transformation CSS :
élément transformable
Un élément transformable est un élément de l'une des catégories suivantes:
un élément dont la présentation est régie par le modèle de boîte CSS, qui est un élément de niveau en ligne de niveau bloc ou atomique, ou dont la propriété display est calculée comme suit: table-rangée, groupe-rangée-table, groupe-rangée-table -group, table-cell ou table-caption [CSS21]
un élément de l’espace de nom SVG non régi par le modèle de boîte CSS comportant les attributs transform, ‘patternTransform’ ’ou gradientTransform [SVG11]
Nouvelle police géniale introduite rotation notation http://fontawesome.io/examples/
//Normal:
<i class="fa fa-shield"></i> normal<br>
//Rotated:
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
//Flipped
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
Le fichier font-awesome.css
définit display: inline
pour votre sélecteur: [class^="icon-"],
[class*="icon-"]
. Vous pouvez le voir à la ligne 161 du fichier CSS:
[class^="icon-"],
[class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
Par conséquent, vous devez définir le .widgetbox [class*="icon-"]
pour avoir une propriété display: block;
http://jsfiddle.net/88g5P/6/
EDIT: après avoir recherché les différences entre display:block;
et display:inline-block;
, je suis tombé sur cette simple réponse visuelle sur Stack Overflow . Sur la base de cette réponse, il vaut probablement mieux utiliser display:inline-block
Dans votre cas particulier, le problème est que les icônes que vous utilisez ont display: inline-block
, j'ai ajouté display:block
au CSS personnalisé et cela fonctionne maintenant.
vous devez remplacer le paramètre d'affichage de l'icône, car la rotation ne fonctionnera pas sur les éléments en ligne
.widgetbox [class*="icon-"] {
...
display:block;
}