css旋转字体,css – 旋转字形/字体在Bootstrap中令人敬畏

我试图让我的引导站点中的glyphicons旋转悬停(除了更改颜色).

…使用这个代码：

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

}

显然,颜色发生变化,但即使这样也不会根据CSS中过渡的参数进行更改.

谢谢！