java rotatetransition_transition过度效果 + transform旋转360度

css样式：

.animate{

width:65px;

height:40px;

background:#92B901;

color:#ffffff;

position:absolute;

font-weight:bold;

font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;

padding:20px 10px 0px 10px;

display:blcok;

margin:5px;

-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;

-webkit-border-radius:5px;

-o-transition-property:width,height,-o-transform,background,font-size,opacity;

-o-transition-duration:1s,1s,1s,1s,1s,1s;

-moz-transition-property:width,height,-o-transform,background,font-size,opacity;

-moz-transition-duration:1s,1s,1s,1s,1s,1s;

transition-property:width,height,transform,background,font-size,opacity;

transition-duration:1s,1s,1s,1s,1s,1s;

border-radius:5px;

opacity:0.4;

}

.animate:hover{

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

opacity:1;

background:#1ec7e6;

width:90px;

height:60px;

font-size:16px;

}

html:

鼠标移动到我这里