求教：如何用CSS样式 将背景图 旋转

Question

求教：如何用CSS样式 将背景图 旋转

Answer 1

1 2 3 4 5 6 7

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里面的所有内容都旋转掉(如果里面有文字或者其他也都会被影响而旋转)！

 

Answer 2

用css3的transform: rotate()属性可以实现，具体如 .google{transform:rotate(180deg)}；
其中需要注意的是：
1、180deg指的是元素旋转角度，单位为deg；
2、Chrome 和 Safari 需要前缀 -webkit-，Internet Explorer 9 需要前缀 -ms-，Opera需要前缀-o-，Firefox需要前缀-moz-；

因此完整实现代码如下：
.google
{
transform: rotate(180deg);
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Safari and Chrome */
-o-transform: rotate(180deg); /* Opera */
-moz-transform: rotate(180deg); /* Firefox */
}