css - CSS3 Simultaneous Image Rotation, Scaling, animating and Opacity reduction -


i wanted create metro style website , want add buttons in following :

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

when hover on 'new user', 'sales' etc tabs, icons/images in tabs rotates, increases size , looses opacity.

but not able exact output. 2 outputs @ time : --> opacity , scaling --> opacity , rotation

but not of them simultaneously.

you can see had reached @ :

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

my current css :

.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);  /******************************/  -webkit-transform: scale(2.5,2.5); -moz-transform:scale(2.5,2.5); opacity: 0.5; -moz-opacity: 0.5;  }  

i appreciate kind of in this.

add following code

.main_tab.shortcut.span2.padding20.text-center a:hover {   font-size: 40px;   opacity: 0.5;   transform: rotate(45deg); } 

and remove hover used (icon-rocket:hover)


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -