使用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);
}