如何使用 css3 transform 屬性來變換背景圖？

本文和大家分享的主要是使用 css3 transform 屬性來變換背景圖相關(guān)內(nèi)容，一起來看看吧，希望對大家學(xué)習(xí)css3有所幫助。

　　使用 css3 transform?屬性可以輕易的旋轉(zhuǎn)，傾斜，縮放任何元素。目前即使沒有任何前綴也可以在絕大部分瀏覽器上很好的使用 。 如果你要在黑莓瀏覽器或者 UC 瀏覽器使用這個屬性， 你需要加 -webkit- 前綴。

　　#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)提案，但這對當前就想要實現(xiàn)這個效果的開發(fā)者沒有什么意義。

　　幸運的是，我們找到一個解決方式。這個方式本質(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)固定背景

　　所有主元素的變換操作都會影響到偽類元素. 假如偽類元素不想要變換操作時，我們就需要撤銷這個變換， 例子：當一個父元素旋轉(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)整來確保它可以完全覆蓋主元素.

　　大部分主流瀏覽器可以實現(xiàn)這個效果， 包括 Edge， 最低支持到 IE9. IE8 只會顯示背景但是不會有任何變換效果.

來源：眾成翻譯