css - CSS3 Simultaneous Image Rotation, Scaling, animating and Opacity reduction -
i wanted create metro style website , want add buttons in following :
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
Post a Comment