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

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

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

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

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

僅僅變換背景

這個元素可以使用任何樣式，但一定要設(shè)置 position 屬性，因為其偽類元素會基于它來定位。如果不想背景撐到元素外，那就要設(shè)置 overflow: hidden。

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

現(xiàn)在我們可以創(chuàng)建一個絕對定位的偽類元素來實現(xiàn)變換背景。為了確保他會低于元素內(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);

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

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

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

#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)，你需要對偽類元素的寬高及定位屬性進(jìn)行調(diào)整來確保它可以完全覆蓋主元素

總結(jié)

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