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

標籤：

本文和大家分享的主要是使用 css3 transform 屬性來變換背景圖相關內容，一起來看看吧，希望對大家學習css3有所協助。

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

#myelement {

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

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

目前 W3C 沒有關於如何旋轉背景圖的提案。我覺得這個是非常常見使用情境，我深信最終也會出來相相關提案，但這對當前就想要實現這個效果的開發人員沒有什麼意義。

幸運的是，我們找到一個解決方式。這個方式本質上，是將背景圖應用到某個元素的 before或者after 這種偽類元素上而不是應用到元素本身。然後在偽類元素獨立的使用 transform 屬性.

僅僅變換背景

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

#myelement {

position: relative;

overflow: hidden;

}

現在我們可以建立一個絕對位置的偽類元素來實現變換背景. 為了確保他會低於元素內容顯示，需要設定 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);

}

需要注意的是，在變換的過程中，你需要去調整偽類元素的 width height position 屬性. 例子：假如偽類元素使用了一張可重複的圖片做背景， 那麼旋轉地區就必須大於父元素，這樣才可以在旋轉過程中覆蓋整個父元素.

在變換的元素上實現固定背景

所有主要元素的變換操作都會影響到偽類元素. 假如偽類元素不想要變換操作時，我們就需要撤銷這個變換， 例子：當一個父元素旋轉了 30 度，那麼偽類元素需要相反方向旋轉 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);

}

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

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

 

來源：眾成翻譯

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