Вращающиеся глифы / Font Awesome в Bootstrap
Я пытаюсь заставить глифы в моем сайте начальной загрузки вращаться при наведении (в дополнение к изменению цвета).
Вот'моя попытка:http://jsfiddle.net/young_greedo17/88g5P/
... который использует этот код:
<br><br>
Add an event
... Вот'с 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);
}
Вот'пример того, что яЯ ожидаю, что это произойдет при наведении (см. окно с четырьмя столбцами ATF):http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665
Очевидно, цвет меняется, но даже это нет меняются в соответствии с параметрами I 'м настройка для перехода в CSS.
Спасибо!