css代码如何把背景图旋转

html-css022

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.

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

div

{

transform:rotate(9deg)

-ms-transform:rotate(9deg) /* Internet Explorer */

-moz-transform:rotate(9deg) /* Firefox */

-webkit-transform:rotate(9deg) /* Safari 和 Chrome */

}

这是css3 的2d转换 确实能实现将背景图旋转。（9deg是选择角度 自己调整）

但是！ 他会把div里面的所有内容都旋转掉(如果里面有文字或者其他也都会被影响而旋转)！

对你的问题倒是没有答案，只是看到你问题，想插句嘴。你注意-webkit前缀，你要用这种方式实现了，你不用webkit内核的浏览器完全没法看。你应该写：

transform:rotate(180deg)

-ms-transform:rotate(180deg)/* IE 9 */

-moz-transform:rotate(180deg)/* Firefox */

-webkit-transform:rotate(180deg)/* Safari and Chrome */

-o-transform:rotate(180deg)/* Opera */

目前情况下，正确的方式在目前是通过js配合css实现，css3距离普及还早着呢。目前主流浏览器对css3和html5的实现方式完全不一样，所以都得单独设置。