這篇文章將為大家詳細(xì)講解有關(guān)css3如何使用transform屬性來變換背景圖，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元豐順做網(wǎng)站,已為上家服務(wù),為豐順各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

使用 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)背景圖，這個又該怎么做呢？

我們找到一個解決方式。這個方式本質(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);

}

再次強調(diào)，你需要對偽類元素的寬高及定位屬性進行調(diào)整來確保它可以完全覆蓋主元素。

關(guān)于“css3如何使用transform屬性來變換背景圖”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。