Glyphicons giratorios / fuente impresionante en Bootstrap

Estoy tratando de hacer que los glifos de mi sitio de arranque se giren al pasar el cursor (además de cambiar de color).

Aquí está mi intento:http://jsfiddle.net/young_greedo17/88g5P/

... que usa este código:

<div class="widgetbox">
    <br><br>
    <div class="icon-calendar icon-large"></div>
    <h5>Add an event</h5>
</div>

... aquí está el 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);
}

Este es un ejemplo de lo que estoy buscando que suceda en el hover (vea el cuadro de widget de cuatro columnas ATF):http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665

Obviamente, el color cambia, pero incluso eso no cambia de acuerdo con los parámetros que estoy configurando para la transición en el CSS.

¡Gracias!