css代码如何把背景图旋转

html-css09

css代码如何把背景图旋转,第1张

这个要用css3,ie要用滤镜,举例顺时针旋转90度

-moz-transform:rotate(90deg)

-webkit-transform:rotate(90deg)

transform:rotate(90deg)

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

上面代码前三行是css3,第四行是ie滤镜的简单的90度的整数倍旋转方式,更加复杂的度数要用矩阵,需要的话可以查查资料

注:左旋把90改为-90,rotation=1改为rotation=3.

注:如果你的层上还有文字什么的,也会被旋转,所以有文字的话,和背景图放在不同的层上,旋转有背景图的层

用css3的transition,很容易实现hover时旋转效果的:

<style>

img{width:50pxheight:50pxdisplay:block-webkit-transition:0.4s lineartransition:0.4s ease-in}

img:hover{-webkit-transform:rotate(360deg)transform:rotate(360deg)}

</style>

<div>

<img src="http://www.baidu.com/img/bdlogo.gif">