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

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

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

　　#myelement {

　　-webkit-transform: rotate(30deg);

　　transform: rotate(30deg);

　　}

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

　　我們找到一個解決方式。這個方式本質上，是將背景圖應用到某個元素的 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);

　　}

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

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