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

Question

I wanted to create a Metro Style Website and want to add Buttons like in the following :

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

When we hover over the 'New User', 'Sales' etc Tabs, the icons/Images in the tabs rotates, increases its size and looses opacity.

But I am not able to get the exact output.

You can see where I had reached at :

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

I would appreciate any kind of Help in this.

Answer 1

You need to use transition timings...

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;

The above is the CSS applied to the example site you gave.

Answer 2

Try this

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