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

Question

我想创建一个Metro Style网站，并希望添加如下所示的Button：

http://themeforest.net/item/metro-lab-sensitive-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);
}