使用CSS3旋转在选项卡中的图像/图标旋转

Question

我想创建一个地铁风格的网站，并希望在以下内容中添加按钮：

http://themeforest.net/item/metro-lab-responsive-metro-dashboard-template/full_screen_preview/5359122

当我们将悬停在"新用户"，"销售"等选项卡上时，选项卡中的图标/图像会旋转，增加了大小并放松了不透明度。

，但我无法获得确切的输出。

您可以看到我到达的位置：

http://developer.nuevothoughts.com/jiteen/attendance/docs/#

我希望在此方面有任何帮助。

Answer 1

您需要使用过渡时间...

transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;

以上是应用于您提供的示例网站的CSS。

Answer 2

尝试此

.icon-rocket{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow:hidden;
    }  
.icon-rocket:hover  
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}