使用 css3 transform 屬性可以輕易的旋轉(zhuǎn)，傾斜，縮放任何元素。目前即使沒(méi)有任何前綴也可以在絕大部分瀏覽器上很好的使用。

#myelement {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}

這個(gè)聽(tīng)起來(lái)很贊。然而，這個(gè)屬性旋轉(zhuǎn)了整個(gè)元素，包括他的內(nèi)容、邊框、背景圖。如果你只是想旋轉(zhuǎn)它的背景圖而不選旋轉(zhuǎn)內(nèi)容的話(huà)，應(yīng)該怎么做呢？或者你只想旋轉(zhuǎn)內(nèi)容，而不旋轉(zhuǎn)背景圖，這個(gè)又該怎么做呢？

目前 W3C 沒(méi)有關(guān)于如何旋轉(zhuǎn)背景圖的提案。我覺(jué)得這個(gè)是非常常見(jiàn)的使用場(chǎng)景，我深信最終也會(huì)出來(lái)相相關(guān)提案，但這對(duì)當(dāng)前就想要實(shí)現(xiàn)這個(gè)效果的開(kāi)發(fā)者沒(méi)有什么意義。

幸運(yùn)的是，我們找到一個(gè)解決方式。這個(gè)方式本質(zhì)上，是將背景圖應(yīng)用到某個(gè)元素的 before 或者 after 這種偽類(lèi)元素上而不是應(yīng)用到元素本身。然后在偽類(lèi)元素獨(dú)立的使用 transform 屬性。

僅僅變換背景

這個(gè)元素可以使用任何樣式，但一定要設(shè)置 position 屬性，因?yàn)槠鋫晤?lèi)元素會(huì)基于它來(lái)定位。如果不想背景撐到元素外，那就要設(shè)置 overflow: hidden。

#myelement {
position: relative;
overflow: hidden;
}

現(xiàn)在我們可以創(chuàng)建一個(gè)絕對(duì)定位的偽類(lèi)元素來(lái)實(shí)現(xiàn)變換背景。為了確保他會(huì)低于元素內(nèi)容顯示，需要設(shè)置 z-index: -1。

#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);

需要注意的是，在變換的過(guò)程中，你需要去調(diào)整偽類(lèi)元素的 width，height，position 屬性。例子：假如偽類(lèi)元素使用了一張可重復(fù)的圖片做背景，那么旋轉(zhuǎn)區(qū)域就必須大于父元素，這樣才可以在旋轉(zhuǎn)過(guò)程中覆蓋整個(gè)父元素。

在變換的元素上實(shí)現(xiàn)固定背景

所有主元素的變換操作都會(huì)影響到偽類(lèi)元素. 假如偽類(lèi)元素不想要變換操作時(shí)，我們就需要撤銷(xiāo)這個(gè)變換， 例子：當(dāng)一個(gè)父元素旋轉(zhuǎn)了 30 度，那么偽類(lèi)元素需要相反方向旋轉(zhuǎn) 30 度，來(lái)使偽類(lèi)元素回退到固定位置。

#myelement {
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}

再次強(qiáng)調(diào)，你需要對(duì)偽類(lèi)元素的寬高及定位屬性進(jìn)行調(diào)整來(lái)確保它可以完全覆蓋主元素

總結(jié)

以上所述是小編給大家介紹的使用 css3 transform 屬性來(lái)變換背景圖的方法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論