jQuery旋转插件jqueryrotate用法详解

html-css06

jQuery旋转插件jqueryrotate用法详解,第1张

用css吧，CSS就行的，例如：

顺时针旋转90度：

-moz-transform:rotate(90deg)

-webkit-transform:rotate(90deg)

-o-transform:rotate(90deg)

transform:rotate(90deg) 

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1)

其它度数请自行修改下，可以用在LOGO之类的Hover效果，360度的话，参考下：

p img{ 

-moz-transition: all 0.8s ease-in-out 

-webkit-transition: all 0.8s ease-in-out 

-o-transition: all 0.8s ease-in-out 

-ms-transition: all 0.8s ease-in-out 

transition: all 0.8s ease-in-out 

} 

p img:hover{ 

-moz-transform: rotate(360deg) 

-webkit-transform: rotate(360deg) 

-o-transform: rotate(360deg) 

-ms-transform: rotate(360deg) 

transform: rotate(360deg) 

}

/*绕Z轴的*/

img{

    -webkit-transition: 0.4s

    -webkit-transition: -webkit-transform 0.4s ease-out

    transition: transform 0.4s ease-out

    -moz-transition: -moz-transform 0.4s ease-out

}

  

img:hover{

    transform: rotateZ(360deg)

    -webkit-transform: rotateZ(360deg)

    -moz-transform: rotateZ(360deg)

}