首頁猿問求教：如何用CSS樣式將背景圖旋轉(zhuǎn)

求教：如何用CSS樣式將背景圖旋轉(zhuǎn)

CSS3

開滿天機(jī) 2019-05-16 10:09:16

查看完整描述

4 回答

慕絲7291255

TA貢獻(xiàn)1859條經(jīng)驗(yàn) 獲得超6個(gè)贊

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轉(zhuǎn)換確實(shí)能實(shí)現(xiàn)將背景圖旋轉(zhuǎn)。（9deg是選擇角度自己調(diào)整）

但是！他會(huì)把div里面的所有內(nèi)容都旋轉(zhuǎn)掉(如果里面有文字或者其他也都會(huì)被影響而旋轉(zhuǎn))！

反對回復(fù) 2019-05-17

慕尼黑8549860

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超11個(gè)贊

用css3的transform: rotate()屬性可以實(shí)現(xiàn)，具體如 .google{transform:rotate(180deg)}；
其中需要注意的是：
1、180deg指的是元素旋轉(zhuǎn)角度，單位為deg；
2、Chrome 和 Safari 需要前綴 -webkit-，Internet Explorer 9 需要前綴 -ms-，Opera需要前綴-o-，F(xiàn)irefox需要前綴-moz-；

因此完整實(shí)現(xiàn)代碼如下：
.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 */
}